How to create space between two columns when stacked on mobile

[vandepar]

Hi,

I searched for more than a couple of hours on how to solve a column stacking issue on the mobile version of my website. I am OK with the view that puts both columns op top of each other (stacking) BUT in this scenario would rather want to create a white space or gap between the two columns for mobile version only so that both column do not touch each other. This issue is related to the pricing section on the website.

I have tried a couple of related CCS wording that I could find that should solve for it but nothing worked. I followed the paths:
Appereance > Customizer > Custom > CSS and Custom > CSS in the Customizer but I couldn’t see any result after using.

Do you have a suitable solution?

Many thanks.

[thai]

Hi There,

To add the space between 2 columns globally, please add this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    .x-column.x-sm {
        margin-bottom: 25px;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[vandepar]

Hi Thai,

Thanks a lot for the quick response. The code worked for me, so that’s super great. It does however increase the margin-bottom for all columns and NOT for a specific section of the page. In fact, the rest of the mobile website was fine

Is there an addition to the above CCS that only applies to columns of the pricing section?

Thanks!

[jade]

Hi there,

You may specify the columns that you want to target by adding a class name to those specific columns. You can do so by clicking on the customize option of the column setting then you will see the class field.

You can then update the code above to:

@media (max-width: 767px){
    .the-class.x-column.x-sm {
        margin-bottom: 25px;
    }
}

The code above assumes that the class you have added to the columns is the-class. Feel free to change the code according to the class name you assigned to the column.

Hope this helps.

[vandepar]

Yes it worked, super thanks!

[jade]

You’re welcome!