Not all columns in row are showing up in mobile

Hi there. I have a section with three rows and four columns in each row. Each column has a full button element. They look great on desktop but on mobile only the first two images on each row from the left show up and there is also overlapping on the rows. Can you help please?

My site is unahealydesign.com Thanks.

Hi any luck sorting this out yet please?

Hello @UnaHealy,

Thanks for writing in!

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to. We provide support to our customers 24/7/365 in the Support Forum. Support questions are answered in the order received and responses may take up to 24 hours (typically sooner). Complex questions or busy times may take longer.

We have checked your page and all of the 12 columns are displayed on smaller screens. We even tested it on my mobile phone.

Please clear all your plugin caches, browser cache or use private browsing mode and test your site again.

Cheers.

Sorry about that! And thanks - I actually had to revert to a previous styling. But in my site I have a test page which I can give you login details for so you may be able help there and I can then use that in the live site?
Thanks again.

Hey @UnaHealy,

Yes, you can give us access to your test page so that we can check the setup properly. To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password
  • Page URL

You can find the Secure Note button at the bottom of your posts.

Thank you.

Hey @UnaHealy,

We can’t log in to your website because of the firewall, I suggest that you completely disable it in the meantime so that anyone in our staff can access it.

Thank you.

If you send me your IP I can whitelist that

Just getting that switched off now. Thanks for your patience.

The firewall will take 24 hours to deactivate but will be good to go from then.

Hi @UnaHealy,

Thanks for the information. Please let us know once it is ready to access.

1 Like

Hello @UnaHealy,

I have checked your test page and all of the 12 columns displayed in the small and extra small screens.

We would highly recommend that you clear your browser cache or test the page in another browser like MS Edge or Firefox.

Kindly let us know how it goes.

That homepage is perfect. What I want to look like is the version I have designed on unahealydesign.com/test which you can access with the password I sent privately. That is the one that I am having trouble with. Can you access that please?

Hello @UnaHealy,

Now, I see the issue. You need to set the height of your columns to auto. Setting to 100% only applies if you have an absolute or relative container. Since you are using Flexbox, setting to auto will just do.

Best Regards.

Perfect! Thank you so much. Super service!

Pleased to be of assistance, @UnaHealy.