Columns Padding

Support
#1

I am struggling to add padding between columns, when they stack above one another (Mobile device size).
They padding is all good untill mobile.

I am trying to replicate the menu on this page here:
https://yellowimages.com/

DEKSTOP

MOBILE

#2

Hi,

I checked and can see you are not using xtheme,pro theme or cornerstone.

You need to activate xtheme so we can help.

Thanks

#3

The website i sent you was an example I am trying to replicate.

I am woking on a localhost system currently

#4

Hello @MolemanProductions,

Thanks for updating in!

You can achieve this set up by utilizing a section, a row with one column and another row with two columns. The marginless column option of the second row must be enabled. Since there is no margin in the column settings, you will have to apply the margin, padding and background color in the text element that you will add.

Hope this make sense.

#5

Im sorry, but not really following,

#6

Hello @MolemanProductions,

I have logged in and created a test page for you.
You should be able to check out the section, row, column and text element settings.

Please see the secure note.

#7

Thanks, unfortunately that works for just the text, Im trying to use the column to apply a background image.
Maybe there is a better way to do this?

I’ve edited the sample page with more of a finished design, related to the reference website from previous. I’ve also added a little CSS to allow the columns to stay even lengths (yet to align buttons and center paragraph text).

Maybe im going about this all wrong. Happy for suggestions.

#8

Hi,

You can add a unique class to your first columns

Then add a bottom margin for that class in mobile only by adding the code below in Theme Options > CSS

@media(max-width:767px) {
.first-column {
    margin-bottom:20px;
}
}

You may change 20px to adjust the gap.

Hope that helps

#9

Perfect!! Thankyou so much!! <3

#10

You are most welcome. :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.