Problems with Gap Size using Percentages!

[core365]

Hi, I’ve been creating various sections for my website and for one section I’ve done 2 different ones - one to view on desktops/laptops and the other to view on mobile devices. The section that is intended to view on desktops/laptops is exactly how I want it, however when it comes to viewing the mobile device version on my iPhone, the gap size at 110% I’ve been using seems non existent, whilst when viewed in Cornerstone it’s there and the layout is how I want it! Is there an issue with the gap size if you use percentages?

Here’s 2 screen grabs, one from the view in Cornerstone (as it should appear on a mobile) and the other taken from the view on my iPhone.

Hope you can help!

Thanks!

[thai]

Hi @core365,

I suggest you to hide the column contains the gap element on mobile screen sizes.

You can do that by adding the x-hide-md x-hide-xs to that column:

Hope it helps

[core365]

Hi, I used the Class code but it doesn’t change anything on the mobile view, I wanted it to look like how I had it in Cornerstone with the gap! The problem is it’s not showing the gap when you view it on a mobile. I’ve set the gap at 110% but it’s showing it on a mobile as if there wasn’t anything there.

Cheers

[jade]

Hi @core365,

You have several licenses in your account and I am not sure which site is in question. Would you mind providing the link to the site so that we can check it?

Thank you.

[core365]

Hi, sorry, I forgot to add that into a secure note - it’s being built on a temp link! I’ll get that done now.

Thanks!

[thai]

Hi @core365,

Please try with this solution, add the following element CSS to your gap element:

@media (max-width: 767px){
     $el {
          height: 200px !important;
     }
}

Hope it helps

[core365]

Yep, that’s sorted it, thanks! Is there an issue with the % function as to why it’s not working?

Cheers

[mldarshana]

Hi There @core365

To test that issue further, you need to remove all of your custom CSS rules to see if there’s any conflict with them. To further troubleshooting, you need to disable your plugins as well.

Thanks!

[core365]

Ok, thanks for the info.

Cheers!

[Prasant]

Please let us know how it goes.