Display two columns on mobile view



Q: I would like to know how can i display two columns in a row on mobile view instead just one please?

A: Add custom css class say custom-row in Row Module Settings > Custom CSS > CSS Class then add this css code into Divi > Theme Options > General > Custom CSS field.

@media only screen and ( max-width: 480px ) {
.page-id-1359 .custom-row .et_pb_column.et_pb_column_1_4 {
margin-right: 2.5%;
width: 47.25% !important;
}
}

* Change Page id and custom-row for your requirement.


Tuts Directory Rating

0




  • The comment section is for blog post/tutorial rating and reviewing purposes only. If you have any questions about a tutorial, please post them in the tutorial publisher's website.

    Leave a Reply

    3 Comments on "Display two columns on mobile view"

    Notify of
    avatar
    Sort by:   newest | oldest | most voted
    Nate Heath
    Guest

    This doesn’t seem to work. Do I need a page id if I just want it to be a general class I could use anywhere?

    Mister Tuts
    Admin

    You should be able to use a general class to make this effect work on site wide. This was a solution provided to one of our Facebook group member. In this case the person wanted to have this effect on a particular page only.

    Patty
    Guest

    Right idea, personally i preferred putting: width: 47.25% !important; within Column 1 Main Element / Column 2 Main Element, and having a Row that only shows up for mobile or tablet (not laptop).

    wpDiscuz