padding in row on small devices

Hi

On this frontpage http://www.highendbus.com/, I have troubles to figure out how to make som padding in the hero header image, when on mobile devices. I tried setting margin and padding in the row, in columns and on module elements, but it does not work.

I would appreciate a tip to get the padding set. Thanks in advance
Jette

Hi Jette,

You can either disable the “Enable Auto Spacing” option (I wouldn’t recommend) or you can try the following CSS, please.

@media (max-width: 769px) {
  .fl-node-570cd907530c2 .fl-col-content {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

You can add padding-top and padding-bottom if you like and also change the values to get your desired style.

Thanks,
Danny

Excellent thanks !

by the way, the issue happens on all pages, is there a way ( a selector) that goes for alle pages on the site?

Thanks in advance
Jette

Hi Jette,

Can you provide temp admin access, so we can take a closer look, please?

Thanks,
Danny

user: temp_login

PW: BeaverSupport_99

:o)

Hi Danny

Another issue with padding/margins on small devices. The callout modules on this page http://www.highendbus.com/endagsture/endagsture/, does not have padding on the right side , when on small devices - I tried settings both for module and columns with no succes.

I would appreciate if you could help me figuring this out too.

Thanks in advance

Hi Jette,

Ok, I see what your issue is now. Basically, there is no way we can add CSS to style all those headings you have on each page, as it will require extensive CSS.

However, the issue you have is that you have set both the margin/padding in Global settings to 0. If you set both values to something like 20px. This should resolve your issue. For more information on how these values work, see this topic.

Thanks,
Danny