ansh04

Hi @bsfherman

As I didn’t receive a response here on the forum for days, I already raised a ticket (#175493) through your Support Portal. And based on the response I got there, I have now moved one step ahead. That means, that one part of the problem is solved. However, it led me to the next part, as explained below.

After changing the colors of My Account icon in my site’s transparent header, I found that whatever color I choose there, that gets applied to all devices/modes (desktop, tablet, mobile). So, if choose White, it is not visible on my mobile site, because it has a White background there. If I choose Black, my mobile site looks fine, but desktop site doesn’t (e.g., home page has a dark background). The behavior is same for both Account and Cart icons.

Can you suggest something to fix this?

You can find my site url/link from the ticket# I mentioned above.

Thanks!

No response????

Is it because there is no solution or should I assume that there is no support from Astra team here?

Sona,
Thanks for your solution; it started showing on mobile after I removed that line of code.
However, I had added that line of code with specific purpose (as suggested by one of your colleagues) – to get rid of blank area which was appearing on top of the page.

Is there any way that I can achieve both of these requirements?
1. Logo looks perfect on all devices (desktop, tablet, mobile).
2. No blank area/whitespace on top of the page

Would appreciate any help or pointers on this!

Here is the link:
Sanskritsamvad.com

Cool; it works! Thanks much Suyogya!

Never mind! I found a way by using following in Custom CSS:

#content {
position:relative;
text-align:justify;
}

Never mind!

It started working by itself after some time – guess it takes some time to get the change reflected (though still don’t understand why other pages were working and only home page had this problem; anyways!!!)

Got it; thanks a lot!

Never mind!
I got where I was going wrong. Being a beginner in WordPress/php, didn’t know that I should have first removed the first line (media only …) along with its associated pair of curly-brackets.

Anyways, could you please tell me that how should I write both ‘desktop style’ code and ‘tablet style’ code in Custom CSS so that it makes the page dynamic according to the device (desktop/tablet)?

After adding the lines of code for desktop style, I checked the website on a desktop, a mobile phone, and a tablet, and though it’s looking fine on both desktop and mobile (except the overlap part that I mentioned in my previous post), it’s not looking good on tablet (menu goes on to the second line)

So, could you please elaborate the steps to add tablet-style piece of code as well? Though I am not an expert, but to me, it looks like that simply adding both of these code snippets that you provided in Custom CSS may not work for this purpose [I have tried that as well, but only one (one which is coded second – tablet style in our case) of these code snippets (desktop/tablet) seems to be getting reflected, overriding the other one (desktop style)].

Thank you for your support!

Thanks Tigran!

After making the change you suggested in WDWT_front_params_output.php, I was able to bring the logo in center of the page and by using max-width, was able to change the logo size as well. [After bringing the logo to the center of the page, it started overlapping with the menu and search box in ‘mobile’ view; so, I kept it on left side only. Please let me know if there is any way to fix this (overlapping in mobile view) also].

However, menu font-size still remains the same – the code you provided earlier seems to have no impact at all on the menu. I tried using that same code through ‘Custom CSS’ plugin as well (not the ‘Custom CSS’ option provided in ‘Customize’ theme), but through that as well, menu size is not changing. Wondering what could have gone wrong?

Sure, here is the link:
https://sanskrit.byethost7.com/wp/en/sample-page/

I have another requirement to change logo size and to place the logo either in the middle or on the right of the page, if you can help me with that as well.

Thanks for your response!

I copy-pasted the entire code snippet that you provided in Customize -> General -> General Main -> Custom CSS. However, it didn’t make any difference in the appearance of the menu font size or of anything else. I played by providing various numbers in font-size, height & padding parameters just to check that if it makes any difference or not, but it did not.

What am I missing? Please help!