Digital experiences for all disciplines
New Landing › How can we help? › Spacing on mobile
New Landing › How can we help? › Spacing on mobile
- This topic has 17 replies, 4 voices, and was last updated 6 years by David Martin – Support.
-
Posted in: Atelier
-
April 2, 2017 at 8:24 pm #319347
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.April 3, 2017 at 4:20 pm #319458Hi,
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
April 4, 2017 at 9:33 am #319520Hi 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
Attachments:
You must be logged in to view attached files.April 4, 2017 at 10:11 am #319530replace 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
April 4, 2017 at 2:14 pm #319574Perfect – thank you
but now the gap is bigger on the desktop version.Attachments:
You must be logged in to view attached files.April 4, 2017 at 2:27 pm #319578This 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
April 4, 2017 at 4:02 pm #319596Thanks Guys – that’s sorted it all out!
April 4, 2017 at 4:07 pm #319599Great. Glad it’s sorted.
-Rui
June 27, 2017 at 9:42 pm #330281Hi Guys,
This style setting has stopped working since the last lot of updates.
can you help?Page ref: Glassfurniture
Many thanks,
Peter
June 29, 2017 at 9:51 am #330487Hi Peter,
To clarify this, are you wanting to add a 30px space to the images without the verticle spacing on desktop?
June 29, 2017 at 8:51 pm #330585Hi,
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
June 30, 2017 at 5:12 pm #330699For 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:
July 4, 2017 at 7:50 pm #330972Hi 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?July 5, 2017 at 12:27 pm #331017Please add a WP login for us to take a closer look.
Thanks.
July 5, 2017 at 1:01 pm #331027This reply has been marked as private. -
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.