[Resolved] Header, Menus, Widgets and Footers not responsive

[troyw]

Hey guys,

Not really sure where to start with this one, as I have been messing around with the layout settings and trying various CSS, but not really getting anywhere.
I have several issues with the responsiveness of the website, so maybe I will start a the top. I wasn’t sure whether to create seperate topics for each issue, as all responsiveness related. Apologies if I have messed that up.

The Header.
When looking at the website on a mobile device, the header area is really messy. I think it may be improved if completely remove the search field when site is presented on Mobiles or tablets. Is this possible?

While the Cart button presents fine in Desktop and Mobile phones sizes, it grows out of proportion when viewed on a tablet. How do I correct this?

The Menu
The mobile menu is not working at all and just presents blank. Is this due to the Mega Menu I am using and how do I get around this problem. Can I force the menu to present a non-mega menu when screen size is reduced or is there something I need to set within the mega menu?

The Image Gallery
I have used the Image Gallery from my WP Bakery site builder, which I know is not your responsibility. Usually this works OK responsively and I can make the appropriate adjustments within the Rows and Columns. However, nothing I do seems to keep things responsive. Is there an overall theme setting I am missing or some CSS I can add to make this WP Bakery Element behave itself? Alternatively, can you suggest one of your elements which will achieve the same outcome and work responsively?

The Footer Widgets

Using the Footer Widget Area Padding in Mobile mode, I cannot get the small Dog Paw icons to line up with the text. Similarly, the Phone and email icons are not on the same line as the text?

Many thanks in advance

[David]

Hi there,

1. Use this CSS to remove the Search on mobile:

@media (max-width: 768px) {
    .woo-search {
        display:  none;
    }
}

In regards to the button size, in your other topic i provided an answer that should help.

2. You’re using the Off Canvas Panel – you need to add a menu to it, like you would if it were the Primary or Secondary Nav.

3. The Theme doesn’t have any control over page builder content, and neither does it have a gallery element. That is definitely plugin territory.

4. Remove the alignleft class from your IMG html. Instead, just give it a custom class that you can use to style it.

[troyw]

Hey David,
Thanks for all of that, 1 and 2 are now fixed.

As for 3, I suspected so much with the WP Bakery Page Builder, so will look into using a better plugin. I know I need to get away from WP Bakery, but I’m still wrestling with the awkwardness of Guttenberg. Thanks anyway.

A for 4 and in-case anyone else reads this. I swapped the beginning of this bad custom class;

<img class=”alignleft wp-image-160812″ src=“https://my-image.png&#8221; …and so on

and replaced it with this;

<img style=”float: left; margin: 0px 15px 15px 0px;” src=“https://my-image.png&#8221; …and so on

Worked a treat,

Thanks again

[David]

Glad to hear that and thanks for sharing your CSS fix

[Author]

Posts