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


  • 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

    5 Comments on "Display two columns on mobile view"

    newest oldest most voted
    Notify of
    Nate Heath

    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

    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.


    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).

    Rahul udhwani

    Thank you very much its work


    Gracias gracias y gracias, me funcionó perfectamente¡¡