Spacing on mobile

[Klarity]

Hi,

Can you offer some advice on the following please.

I have a home page layout which works well for me. but the spacing doesn’t work well when viewed on the mobile.
See attached image attached.
I’ve show the desktop and the mobile version. The issue is highlighted in Yellow.

Many thanks,

Peter

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

You can add the code below to your custom css option.

.spb_content_element.spb_image_banner.col-sm-4, .spb_content_element.spb_image_banner.col-sm-6 {
    padding-bottom: 30px;
}

You can also use the rows visibility to design some content for desktop and other content for mobile inside the same page, just by changing the Row visibility.

-Rui

[Klarity]

Hi Rui,

Thank you for this – its sort of worked but now added too much space into one of the gaps. see attached screen shot.

Is there way to tweak this?

Many thanks

Peter

[Rui Guerreiro – SUPPORT]

replace the previous code by this one below.

.spb_content_element.spb_image_banner.col-sm-4, .spb_content_element.spb_image_banner.col-sm-6:first-child {
    padding-bottom: 30px;
}

-Rui

[Klarity]

Perfect – thank you
but now the gap is bigger on the desktop version.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

This should sort it.

@media only screen and (max-width: 767px){
   .spb_content_element.spb_image_banner.col-sm-4, .spb_content_element.spb_image_banner.col-sm-6:first-child {
       padding-bottom: 30px;
   }
}

-Rui

[Klarity]

Thanks Guys – that’s sorted it all out!

[Rui Guerreiro – SUPPORT]

Great. Glad it’s sorted.

-Rui

[Klarity]

Hi Guys,

This style setting has stopped working since the last lot of updates.
can you help?

Page ref: Glassfurniture

Many thanks,

Peter

[David Martin – Support]

Hi Peter,

To clarify this, are you wanting to add a 30px space to the images without the verticle spacing on desktop?

[Klarity]

Hi,

Yes i would like all the spacing to be equal around all 5 images in this section.
and then evenly spaced on Mobiles too.

Many thanks,

Peter

[David Martin – Support]

For mobile, please amend the code to this:

@media only screen and (max-width: 767px) {
.spb_content_element.spb_image_banner.col-sm-4, 
.spb_content_element.spb_image_banner.col-sm-6 {
    padding-bottom: 30px;
}
}

For desktop, please add a Blank Spacer asset between the Two/Three column Row from the Page Builder:

[Klarity]

Hi Guys,

Ive tried this and its not worked i’m afraid?
I also have the spacer in and this doesn’t seem to be working?

[David Martin – Support]

Please add a WP login for us to take a closer look.

Thanks.

[Klarity]

This reply has been marked as private.