Margins not working in mobile view

Beaver Builder
1

Hi,

My query relates to the images / texts I have created and placed in “Section A” at www.sgedesigns.co.uk/hornsealocalmearket

My query is that the blocks of images and text look as they should on a desktop but on a mobile they lose their margin spacings?

Also when adding say 3 columns you don’t appear to be able to add these into a row? Is that right or step that isn’t required?

Many thanks,

Mark

2

Sorry typo: The URL should be:-
http://www.sgedesigns.co.uk/hornsealocalmarket

3

Hey Mark,

Thanks for posting! I checked the Section A part of your site on mobile and it seems you’re adding margins using MicroThemer? Is that the margin you’re referring to?

Also when adding say 3 columns you don’t appear to be able to add these into a row? Is that right or step that isn’t required?

Not really sure what you mean by that though. Do you mind elaborating?

Ben

4

Hi Ben,

Thanks for coming back to me.

The part A I refer to when viewed in desktop the margin is there between the images so that you see the 6 images and a margin ( gap) between each image both side to side and between them one above the other.

When viewed in a mobile / tablet there are no margins between the images they just flow one into the other in 1 vertical column. I have also viewed this with microthemer deactivated and it is just the same…

I have opened another thread on the other query.

Mark

5

Hey Mark,

Thanks for the explanation, just wanted to make sure we’re on the same page. :slight_smile: Under Tools > Global Settings, you can set Auto Spacing to Enabled. Basically, here’s how it works(quoted from Justin).

When Auto Spacing is disabled the margins and padding you set in the row, column, or module settings will be the same on mobile and desktop.

When Auto Spacing is enabled we reset the left/right padding for rows and columns and all margins for rows, columns, and modules to the values set in the global settings.

If that doesn’t do it for you, you may need custom CSS to achieve it. I’m not really sure if MicroThemer can do that. If it can’t, you can use the CSS snippet below. It adds a bottom margin to all column wrappers on mobile.

@media (max-width: 768px) {
  .fl-col-content {
    margin-bottom: 20px !important;
  }
}

Ben

6

Hi Ben,

Thank you for working through this. I can get this mini site signed off now. I didn’t even know about global settings or if I did I had forgotten!

Thanks again,

Mark

7

No worries! Have fun with BB! :slight_smile:

Ben