How To Change The Number Of Columns On Mobile In Divi (With Global Presets)

Finally! Here’s a solid and easy way to change the number of columns on mobile and tablet in Divi. By adding some custom CSS you’ll get full control over how many columns to display on mobile and tablet in each Divi row.

Unlock 2-6 columns on mobile and tablet with nice spacing between and beneath the columns. This is a more robust solution then some quick & dirty fixes, for example display:flex or width:50%,that are shared in various Facebook groups and blogs. We’ll stay consistent by using the same type of code that Divi already uses for desktop columns, and apply it for smaller screens too.

In the end of the article, I’ll show how you can save time by using the the Divi Global Presets to change the number of columns on mobile and tablet – without having to add custom CSS classes to your rows.

Before (1 column)

Divi displays one column on mobile by default

After (2-6 columns)

Display multiple columns in the same row on mobile in Divi

👉  Recommended post: Create Custom Divi Column Structures In Mobile Devices With CSS Grid

1. Add CSS to enable multiple columns on mobile and tablet in Divi

The first step to change the number of columns in Divi for mobile and tablet is to add some custom CSS.

  1. Log in to your WordPress dashboard
  2. Go to Divi » Theme Customizer » Additional CSS
  3. Copy and paste the CSS below:

Pro tip: Copy the entire CSS snippet to access all the additional column options for mobile and tablet. If you only need one specific option, for example 2 columns on mobile, you only need to copy that specific part of the snippet (row 3-21 below).

Update January 10, 2024: The code below is updated to work better with both Theme Builder templates and non Theme Builder pages and posts. Thanks to my readers for contributing in the comments!

/*** Change Mobile Columns By DiviMundo.com ***/

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
    html .et-db .two-col-mob .et_pb_column {
        width:47.25% !important;
    }
    
html .et-db .two-col-mob .et_pb_column:nth-last-child(-n+2) {
        margin-bottom:0;
    }

    html .et-db .two-col-mob .et_pb_column:not(:nth-child(2n)) {
            margin-right:5.5% !important;
    }
}

/* 3 Columns Mobile */
@media all and (max-width: 767px) {
    html .et-db .three-col-mob .et_pb_column {
        width:29.6667% !important;
    }

    html .et-db .three-col-mob .et_pb_column:nth-last-child(-n+3) {
        margin-bottom:0;
    }

    html .et-db .three-col-mob .et_pb_column:not(:nth-child(3n)) {
        margin-right:5.5% !important;
    }
}

/* 4 Columns Mobile */
@media all and (max-width: 767px) {
    html .et-db .four-col-mob .et_pb_column {
        width:20.875% !important;
    }

html .et-db .four-col-mob .et_pb_column:nth-last-child(-n+4) {
        margin-bottom:0;
    }

    html .et-db .four-col-mob .et_pb_column:not(:nth-child(4n)) {
        margin-right:5.5% !important;
    }
}

/* 5 Columns Mobile */
@media all and (max-width: 767px) {
    html .et-db .five-col-mob .et_pb_column {
        width:15.6% !important;
    }

    html .et-db .five-col-mob .et_pb_column:nth-last-child(-n+5) {
        margin-bottom:0;
    }

    html .et-db .five-col-mob .et_pb_column:not(:nth-child(5n)) {
        margin-right:5.5% !important;
    }
}

/* 6 Columns Mobile */
@media all and (max-width: 767px) {
    html .et-db .six-col-mob .et_pb_column {
        width:12.083% !important;
    }

    html .et-db .six-col-mob .et_pb_column:nth-last-child(-n+6) {
        margin-bottom:0;
    }

    html .et-db .six-col-mob .et_pb_column:not(:nth-child(6n)) {
        margin-right:5.5% !important;
    }
}

/*** Change Tablet Columns By DiviMundo.com ***/

/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .et-db .one-col-tab .et_pb_column {
        margin-right:0 !important;
        width:100% !important;
    }
    
        html .et-db .one-col-tab .et_pb_column:not(:last-child) {
        margin-bottom:30px !important;
    }
}

/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .et-db .two-col-tab .et_pb_column {
        width:47.25% !important;
    }

.two-col-tab .et_pb_column:nth-last-child(-n+2) {
        margin-bottom:0;
    }

    html .et-db .two-col-tab .et_pb_column:not(:nth-child(2n)) {
        margin-right:5.5% !important;
    }
}

/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .et-db .three-col-tab .et_pb_column {
        width:29.6667% !important;
    }

html .et-db .three-col-tab .et_pb_column:nth-last-child(-n+3) {
        margin-bottom:0;
    }

    html .et-db .three-col-tab .et_pb_column:not(:nth-child(3n)) {
        margin-right:5.5% !important;
    }
}

/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .et-db .four-col-tab .et_pb_column {
        width:20.875% !important;
    }

html .et-db .four-col-tab .et_pb_column:nth-last-child(-n+4) {
        margin-bottom:0;
    }

    html .et-db .four-col-tab .et_pb_column:not(:nth-child(4n)) {
        margin-right:5.5% !important;
    }
}

/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .et-db .five-col-tab .et_pb_column {
        width:15.6% !important;
    }

.five-col-mob .et_pb_column:nth-last-child(-n+5) {
        margin-bottom:0;
    }
    
    html .et-db .five-col-tab .et_pb_column:not(:nth-child(5n)) {
        margin-right:5.5% !important;
    }
}

/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .et-db .six-col-tab .et_pb_column {
        width:12.083% !important;
    }

    html .et-db .six-col-tab .et_pb_column:nth-last-child(-n+6) {
        margin-bottom:0;
    }

    html .et-db .six-col-tab .et_pb_column:not(:nth-child(6n)) {
        margin-right:5.5% !important;
    }
}

Available mobile columns options:

  • 1 column on mobile

    If you don’t change anything, the Divi row will display only one column on mobile.

  • 2 columns on mobile
  • 3 columns on mobile
  • 4 columns on mobile
  • 5 columns on mobile
  • 6 columns on mobile

Available tablet columns options

  • 1 column on tablet

    This is useful if you want to prevent Divi from displaying for example three columns on tablet when displaying six columns on desktop.

  • 2 columns on tablet
  • 3 columns on tablet
  • 4 columns on tablet
  • 5 columns on tablet
  • 6 columns on tablet

2. Add CSS Classes to your Divi Rows to change the number of columns on mobile and tablet

To apply the new column count for mobile and tablet you need to add the matching CSS class(es) to your Divi row. That will actually take less time than reading this paragraph of text.

  1. Enable the Divi Visual Builder on the page that you want to edit
  2. Edit the row (that’s the box with the green border) by clicking the cogwheel
  3. Go to Advanced » CSS ID & Classes » CSS Class
  4. Add one or two CSS classes, matching the number of columns that you want to use, from the table below.

Please notice: Sometimes, the Divi Visual Builder does not display the new column structure the correct way in backend. Save and preview in frontend to see the final result.

Number of columns

Mobile CSS class

Tablet CSS class

One

[no class needed]

one-col-tab

Two

two-col-mob

two-col-tab

Three

three-col-mob

three-col-tab

Four

four-col-mob

four-col-tab

Five

five-col-mob

five-col-tab

Six

six-col-mob

six-col-tab

The table above is actually a live example of this code using the classes “three-col-mob three-col-tab” to display three columns on tablet and three columns on mobile (the same as on desktop).

Examples of how to apply the CSS classes on your Divi rows

Just separate the mobile class and the tablet class with a simple space, for example: two-col-mob four-col-tab

Here are four examples of how you can apply the CSS classes to change the numbers of columns on mobile and tablet in your Divi rows. Just leave the CSS Class field empty if you want to use the default number of columns.

2 columns on mobile and 4 columns on tablet

2 columns on mobile and 4 columns on tablet in Divi

Add the CSS classes two-col-mob four-col-tab in the row settings to achieve this.

3 columns on mobile and 3 columns on tablet

3 columns on mobile and 3 columns on tablet in Divi

Add the CSS classes three-col-mob three-col-tab in the row settings to achieve this.

3 columns on mobile and 6 columns on tablet

3 columns in mobile and 6 columns in tablet

Add the CSS classes three-col-mob six-col-tab in the row settings to achieve this.

1 column on mobile and 2 columns on tablet

2 column in mobile and two columns in tablet

Add the CSS classes two-col-tab in the row settings (one column for mobile is default in Divi so no custom CSS is needed for that).

3. Pro Tip: Use Divi Global Presets To Change Number Of Columns on Mobile And Tablet

This last step is not necessary but it’s a nice way to speed up your design process by adding different mobile row structures to your Divi Global Presets library.

This way, you don’t need to add custom CSS classes each time that you want to change the number of columns in a row. Instead, you can just choose the row numbers that you want to use from the Presets dropdown when you add a new row.

Changing mobile row numbers with Divi Global Presets

  1. Make sure that you have added the custom CSS in the Theme Customizer (see step 1 above)
  2. Create a new row on a page, a post or in a layout in the Divi Library. It does not matter which column structure you choose for the row.
  3. Close the Insert Module modal and open the Row Settings by clicking the cogwheel
  4. Go to Advanced » CSS ID & Classes
  5. Enter the CSS Class(es) that you want to add to your preset (see step 2 above) – for example two-col-mob four-col-tab
  6. Now, click the Preset: Default toggle in the purple top bar of the Row Settings
  7. Click Create new preset from current styles
  8. Give your new Preset a clear name, for example 2 col mob | 4 col tab
  9. Make sure that Assign Preset To Default is set to NO and save by clicking the green checkmark button
  10. Repeat the process to add as many Row Presets you like.

That’s it! To change the number of columns on mobile and tablet, just click the Preset toggle in the row settings and choose one from your list.

Add column CSS classes to your row
1. Add CSS class(es) to your row.
Create global row presets
2. Create a new global preset.
Choose your mobile column structure

3. Use the presets on any page or post.

Related posts

87 Comments

  1. Thanks very much for this helpful blog. It has a lot of detail however your explanations are clear and practical. Also you have given many possibilities for different column options on mobile and tablet and the process is easy with your explanation. I have bookmarked this blog for my future designs … thanks very much for your solution.

    Reply
    • That’s nice to hear Rob! I’m really glad you liked it. 🙂

      Reply
  2. Thank you so much! this is really a great tutorial :). I got a small question, hope it is ok to ask as you already gave away a great amount of info.

    I got a 3 column row in Desktop, but i want to have it as 2 column row on mobile, it works but then it is 2 columns +1 beneath. the next row is the same. so you always have:
    2 columns
    1 Column + 1 free spot

    is there a way to fix this?

    Desktop

    2 rows each with 3 columns

    On Mobile I want

    3 rows with 6 columns from above.

    Appreciate it !

    Reply
    • Thanks T, I’m glad you like it! Well, it’s tricky to nest different rows in Divi. I think the easiest way would be to hide the desktop rows on mobile devices (under the Advanced tab) and create a new three row structure for mobile and hide it on desktop. It’s a workaround but it should work. You could save the modules in the columns as global modules in the Divi library, to avoid the need for double updates.

      Reply
  3. Wow! Such an excellent, practical guide, Victor – thanks for sharing. 👉
    This blows all other similar tuts out of the water, and goes much further than I was even looking for! 👉
    I’m now off to read/bookmark the rest of your blog.
    Keep up the good work. 👉

    Reply
    • Thanks a lot for your kind words! 🙂 More good Divi stuff is coming up soon.

      Reply
  4. Thank you sooooo much for sharing this. I’ve been looking for a way to do this for about 3 weeks now but I’d been struggling to find something because I didn’t know what to google. I’d been manually adjusting margins to achieve the look I wanted but it was driving me nuts. I finally came across your video which lead me here. Thank you! I can’t wait to finish my website redo now that I have this tool in my kit.

    Reply
    • That’s awesome, I’m glad you found your way! 👉

      Reply
  5. Thanks a lot, this is so very helpful!

    I ran into 1 strange issue: when using this in the Divi theme builder. The two-col-mob class does not seem to work.

    I have a page on which everything looks fine, but when I save it to the Divi library and then use it as a theme builder template, on mobile, the 2 columns are stacked and not shown next to each other. The tablet version is fine. How could this happen and do have an idea how to fix this please?
    Thanks so much for your reply.

    Reply
    • Hi Pieter! Make sure that the CSS class still is in the row settings. If so, you could try to clear the Divi Static CSS files and also the website cache and browser cache.

      If that doesn’t help I’ll need a link to take a closer look.

      Reply
  6. Hi Victor,

    Thanks for your reply. I found out that the phone page doesn’t look right in the template withing the builder, but the pages that are assigned to the template look like they should, so there was no issue actually!

    Thanks again for your article!!

    Pieter

    Reply
    • I see! Yeah, sometimes the Divi Builder doesn’t read the custom CSS in backend for some odd reason. But I’m happy to hear that it looks good in frontend. 🙂

      Reply
  7. I just discovered your blog looking for this solution and have already bookmarked it. Lots of interesting information. I love this trick.
    I only see one problem, that if you select an asymmetric column structure, when applying this css it keeps the columns symmetrical.
    How could I change the CSS code to be able to create the asymmetric columns?
    Thanks.

    Reply
    • Thanks Kovalski! Maybe I’ll do another tutorial on how to create asymmetric columns in mobile. Meanwhile, you can achieve this effect with plugins like Divi Toolbox.

      Reply
      • Hi Randy! This seems to be a rather complex problem. Try to reinstall WordPress and perhaps delete and republish the posts to see if that helps.

        Reply
      • One vote for that tutorial. I’ll take a look at the Divi Toolbox. Thank you very much.

        Reply
  8. hi
    the 3 column on tabk like this does not work
    .three-col-tab .et_pb_column:not(:nth-child(3n)) {
    margin-right:5.5% !important;
    }
    it works only when you set a lower % on not(:nth-child(3n))

    Reply
    • Hi Hoyem! I just tested the snippet on a clean installation with Divi 4.20 and it works fine with three columns on both a standard iPad and iPad Mini. There could be some other CSS, setting or plugin that’s conflicting with this code on your site. But I’m glad you found a solution that worked.

      Reply
  9. This code was excellent and did the trick for 6 affiliate logos in a row. THANKS.

    Reply
    • Awesome! I just checked out your site and it looks cool with the gradient text btw. 🙂

      Reply
  10. Hi Victor! Really great info One issue I am having is spacing, I want none like on my desktop but on my mobile and tablet I have a 1px gutter that I really do not want. Do you know how to fix?

    Reply
    • Hi Tara! Try to replace the old four column snippet with this one:

      /* 4 Columns Mobile No Gutter Width */
      @media all and (max-width: 767px) {
      .four-col-mob .et_pb_column {
      width:25% !important;
      }
      .four-col-mob .et_pb_column:nth-last-child(-n+4) {
      margin-bottom:0;
      }
      .four-col-mob .et_pb_column:not(:nth-child(4n)) {
      margin-right:0% !important;
      }
      }

      Let me know how it goes! 🙂

      Reply
  11. HI, i’m stuck ..

    This technic works for all my site, and then for my new one, it don’t work on mobile

    Can you help we with that ?

    It’s the section on the bottom of the site, after the footer, i want four icon align next to each other on mobile and tablet

    https://freesoulsapparel.com/produit/set-sail-to-freedom

    Can you check this link ?

    Reply
    • Hi Matheo! The four icons are vertically aligned when I check in tablet and mobile. Maybe it was just a caching issue?

      Reply
  12. Hello Victor,
    thank you for the super video.
    But I still have problems with columns per row on mobile and on desktop.
    Divi Enable Visual Builder isn’t an option in product categories.
    Can you recommend/help what I need to do? 🙂
    Thanks

    Reply
    • Hi Andrew! Category templates are created in the Divi Theme Builder. I have a chapter on this in my Divi course that you can watch. It’s about Post Categories but you can apply the same method but just add a shop module instead of the post module and then display the template for Product categories. Check out: https://www.youtube.com/watch?v=8LCnT-xrr6M&t=20517s

      Reply
      • Hello Victor, I saw your video about post-model (to use theme builder for the category).
        But I don’t have a position on the theme builder (only- theme options, theme customizer, and more, but not theme builder).
        When I tried to update Divi Theme Options updates I saw that I don’t have a User name ad API key.
        Maybe previously a guy, who has created a website, did something wrong (illegal).
        Victor, can you recommend, what I need to do that sort out this situation? I mean, if I will buy Divi license, my Website doesn’t break?
        And one more question I have two templates Divi and Divi ecommerce it’s the same I mean, that DIVI it’s a first Theme builder position?
        Thanks, Andrew

        Reply
        • You should always have an active license to access security updates and new features. You can purchase your own license with 10% off with my affiliate link at https://divimundo.com/divi10/

          Just adding the license key to your website will not break it. But if you haven’t updated Divi in a long time, you should make a backup before doing the update. You can use a free plugin like Duplicator or check with your web host.

          Reply
          • Thanks
            I will do that 🙂

  13. Hi Victor,

    I have been facing an issue with the code. I have used it so many times and worked perfectly, but now there is a problem I can’t resolve by myself.

    I have a WooCommerce website, build with Divi. I have created different page layouts for every product. The problem is that on one of the product pages the codes seem to work, but on others – no. For some reason, it is not getting the column class or something 🙁

    On this page is working:

    https://caeyahair.com/bg/product/arganova-terapia-za-suha-kosa/

    On this page isn’t working:

    https://caeyahair.com/bg/product/proteinov-eksfoliant-za-mazna-kosa/

    Please give me a hand! Greetings, Albena

    Reply
    • Hi Albena! There is some CSS in the Theme Builder that overrides the custom CSS. Try to add this snippet and it will fix the issue:

      @media all and (max-width: 767px) {
      .et-db #et-boc .et-l .two-col-mob .et_pb_column {
      width:47.25% !important;
      }

      Reply
      • Hi, Victor! Thanks for the fast replay! It worked for the two columns, but now there is no space between the three-column row. How to fix it also? And one last question – is there a way to find what causes this overwriting in the builder?

        Regards, Albena

        Reply
        • The snippet only affects the column width in rows with the class two-col-mob so the spacing issue is probably from some other setting. It’s hard to tell about the details without wp-admin access.

          Reply
          • Hi, Victor! I made a few things:

            – removed the equal column height;
            – added: #page-container #main-content before the classes, for example:

            #page-container #main-content .three-col-mob .et_pb_column {
            width:29.6667% !important;
            }

            That solved the issue 🙂 Thanks!

          • Cool! The more specific the targeting is, the higher priority it will get.

  14. Hello Victor, thank you for your post, it is very complete. Perhaps this problem interests you. I need a row with 5 modules to become 2 columns “(min-width: 768px) and (max-width: 1500px)”. I can’t solve it. Thank you!

    Reply
    • Hi Andrés! Tricky one, but this could be a start:

      1. Add the class five-two-col-mob to the five column row.

      2. Paste this CSS in the Theme Customizer:

      /* 2 Columns Custom */
      @media only screen and (max-width: 1500px) and (min-width: 768px) { html .five-two-col-mob {
      display:flex;
      flex-wrap:wrap;
      }

      html .five-two-col-mob .et_pb_column{
      width: 50%;

      } }

      /* Disable default two columns on tablet */
      @media only screen and (max-width: 767px) and (min-width: 480px) {
      html .five-two-col-mob .et_pb_column{
      width: 100% !important;
      margin-right:0 !important;
      } }

      3. Save and preview in frontend. Perhaps you need to add some additional tweaks. Hard to tell without seeing the actual page.

      Reply
      • Hello Victor! Thanks for your time and sorry for the inconvenience. doesn’t work, but only with the “width” attribute. There is no way to change the “width” up to 980px… Any other change like for example the background color works with @media… I’m very intrigued. Thank you so much! If you want I can pass you the web where I am trying this change.

        Reply
        • Sure, I can take a look and see what I can do.

          Reply
          • This CSS will change the five column row to a two column row in viewports that are between 768px and 1500px wide.

            /* 2 Columns Custom */
            @media only screen and (max-width: 1500px) and (min-width: 768px) {
            html .five-two-col-mob {
            display:flex;
            flex-wrap:wrap;
            column-gap:40px;
            }

            html .five-two-col-mob .et_pb_column {
            width: 50% !important;
            } }

            /* Disable default two columns on tablet if needed */
            @media only screen and (max-width: 767px) and (min-width: 480px) {
            html .five-two-col-mob .et_pb_column {
            width: 100% !important;
            margin-right:0 !important;
            } }

            Change the width and max width for the text modules if you want to decrease the spacing between the two columns.

  15. Hey, this worked great! The only issue is that it overrides my ‘equalize column height’. Is there a way to have the columns stay at equal heights?

    Reply
  16. Hi, How to change a column in Mobile View if we have one column and in this section we add Blog Module in (Grid View).
    Can you explain this? Thanks!

    Reply
  17. Hi Victor,
    Thanks for the great explanation.
    What would be the code for this page: https://smartbiomaterials.nl/members2/
    This is one row, one column.
    But on desktop (larger than tablet) i want to display it in 4 columns.
    On tablet two and on mobile one.

    Forgive me for being lazy 😉
    Rob

    Reply
    • Hi Rob! You don’t need custom code for that. Just add a four column row and it will display two columns in tablet and one column in mobile by default.

      Reply
  18. Any idea how to fix if I have 5 columns? Does not work correctly

    Reply
    • Hi Konstantin! How is it working now and how would you like it to work?

      Reply
  19. Hello – this code has been working great for me but have found a bug I can’t seem to figure out. I am using “two-col-mob two-col-three” on a 6 column row. when proofing it, it goes to 3 columns on tablet. But as you continue to minimize the browser window, it goes down to one column and then back to 2 columns. check the top row on this page https://testpresswebsite.dreamhosters.com/johnny-chiba-cats/

    any suggestions?

    Reply
    • Hi! You’re right, there’s a spacing conflict that creates a row break between 480 px and 767 px viewport on your site. You can replace this part of the CSS:

      html .two-col-mob .et_pb_column {
      width: 47.25%!important;
      }

      … with this code and it will work fine:

      html .two-col-mob .et_pb_column {
      width: 44% !important;
      }

      Reply
      • thank you. The revised css worked.

        Reply
  20. Hello – I am trying to target 2 columns on mobile portrait view while keeping 3 columns on mobile landscape. I’ve come up with the following code for 2 columns mobile portrait “two-col-mob-port” but does not work. could you provide some suggestions on how to properly target 479 view port? Thanks for your help.

    /* 2 Columns Mobile Portrait */
    @media all and (max-width: 479px) {
    html .two-col-mob-port .et_pb_column {
    width:47.25% !important;
    }

    html .two-col-mob-port .et_pb_column:nth-last-child(-n+2) {
    margin-bottom:0;
    }

    html .two-col-mob-port .et_pb_column:not(:nth-child(2n)) {
    margin-right:5.5% !important;
    }
    }

    Reply
    • Hi Jeff! Your code seems to be correct. Make sure to adjust the original code for 3 columns on phone like this, to avoid a conflict:

      /* 3 Columns Mobile Landscape */
      @media all and (min-width: 480px) and (max-width: 767px) {
      html .three-col-mob-land .et_pb_column {
      width:29.6667% !important;
      }
      html .three-col-mob-land .et_pb_column:nth-last-child(-n+3) {
      margin-bottom:0;
      }
      html .three-col-mob-land .et_pb_column:not(:nth-child(3n)) {
      margin-right:5.5% !important;
      }
      }

      Add these CSS classes to the row: two-col-mob-port three-col-mob-land

      Let me know how it goes! 🙂

      Reply
  21. Hi Victor! Great tutorials! I have a question. Is that expanded CTA made using Divi-Pixel ? I like that background image of it like in Divi. How to create CTA like that so that on the top and bottom parts of that expanded purple CTA are slightly transparent and the whole CTA covers the whole screen as it is on your website? Also how to make that whole expanded CTA?

    Reply
      • Nice ! Thank you, Victor! One thing that still puzzles me in Divi is why there is min and max width or height while there is a regular width and height. Why just not to use a regular width or height? If being concerned about tablet or phone settings sizing than why also not use specifically just width or height individually or even auto?

        Reply
        • Thanks Radian! Width and height are fixed. If you use that, there is a risk of content overflow. Ifn you use min-width or min-height, the element will grow if needed. I don’t use max-height and max-width often, but there might be some use cases where you don’t want an element to be bigger than its parent (of the parents size is fixed).

          Reply
  22. HI, how i can remove space between each column

    Reply
    • Hi Alex! You can replace
      margin-right:5.5% !important;
      with
      margin-right:0 !important;
      in all places.

      Reply
  23. Hi, Victor
    i have a problem on Divi Builder. i made a new page for my shop with divi builder, and on mobile does not work the class xxx.col.mob
    i made a simple page with a six image selector, and yours css class work without any problem.
    i replicate same thing in shop page with theme builder, and tablet css work without any problem, but all mobile class does not work.
    do you now why this happen?
    Last version of Divi
    link to page: https://new.prontivia.eu/negozio/
    under: SELEZIONE RAPIDA CATEGORIE PRODOTTI (Product category fast selection)
    in that section i use this classes: three-col-mob three-col-tab
    Thank’s and bye
    Alex

    Reply
    • Forget to add the test page at link: https://new.prontivia.eu/000-test/
      on test page your css work perfectly, and change layout of the table

      on page made with them builder, section shop, no way to have your css working.
      link for page is: https://new.prontivia.eu/negozio/

      i can see in source code, only one difference.
      test page:

      theme builder page:

      on many element is attached : _tb_body
      hope to be clear.
      Thank’s
      Alex

      Reply
        • Thank’s a lot, in meanwhile divi vip support has corrected few line in css
          there is a viewport at 479px, only in theme builder, that overwite all css.
          they modified and everything work good.
          now i’m waiting what they have modified, to understand.
          thank’s a lot you css safe my design.
          bye
          Alex

          Reply
  24. Hi Victor, here the mod made by Divi Vip Support, so you probably has visited the page after mods.
    they have changed this line:
    “html .three-col-mob .et_pb_column {”
    with this:
    “html .et-db #et-boc .three-col-mob.three-col-tab .et_pb_column{”

    For memory i remember you that if you build a page from standard page menu in wp, all your css work, but if you use Theme Builder (for example the shop page) css not work, and all column are stacked one over the other. But changing css selector, so every think work. Remember only in theme builder.

    i Don’t know if this can help someone with same problem.

    If you try to make a page with theme builder you can see that your css is not working, probably divi change something from standard page to a page made with them builder.

    Thank’s a lot for you work
    Bye Alex

    Reply
    • Thanks a lot for sharing tis Alex! I’ll update the code in the post for full compatibility with the Theme Builder.

      Reply
  25. Hello Victor,

    Really liked the video and your way of explaining. Super!

    I did put all of the CSS in my Theme Customizer (and saved). Than gave some columns the class

    Though our website looks great (2 columns where the css class is given) in the Visual Builder, it doesn’t on the live site. When I save it, publish the page and open it (even in an incognito browser or on another device) the rows are back at stacking.

    Tried on different pages as well, even in a new row.
    What am I doing wrong?

    For instance https://www.sparklebabyspa.nl/babyspa/cadeaubon/ the rows with images of the spa’s (below: ‘Voor welke vestiging wil jij je bon kopen’) should be 2 column on mobile.

    Thank you in advance.
    Keep up the good work 🙂

    Bye, José

    Reply
    • Thanks Jose! I inspected your page and it looks like that part is using a Speciality Section (the orange one in the Visual Builder). It’s a bit different then the regular section that I’m using in this tutorial.

      Try to replace:

      width: 47.25%;
      margin-right: 5.5%;

      with:

      width: 47.25% !important;
      margin-right: 2% !important;

      in the CSS for the mobile columns. Let me know how it goes! 🙂

      Reply
  26. Hi,
    In the Visual builder, it works. But when I leave the Visual builder, and try it in the inspector for tablet and mobile, it does not work. I have 6 columns in tablet and 3 in mobile.
    I modified the code a bit, but that’s not the reason. I also cleared CSS static and the cache.
    This is the modifed code:

    /* 6 Columns Tablet */
    @media all and (min-width: 768px) and (max-width: 980px) {
    html .et-db #et-boc .six-col-tab .et_pb_column {
    width:11.666% !important;
    }

    html .et-db #et-boc .six-col-tab .et_pb_column:nth-last-child(-n+6) {
    margin-bottom:0;
    }

    html .et-db #et-boc .six-col-tab .et_pb_column {
    margin-left:2.5% !important;
    margin-right:2.5% !important;
    }
    }

    This is my CSS Class on the row: three-col-mob six-col-tab

    It would be great if you would know what’s wrong.
    Thanks in advance.

    Reply
    • Hi Chris! I previewed your page and I get six columns in tablet and three columns in mobile: https://amiresponsive.co.uk/

      Perhaps there were some cache somewhere displaying the old design, or did you find your own fix?

      Reply
  27. After done lots for search on google unable to remove boder
    from default table boder of wordpress. can you tell me source file of table tr td css.
    I have checked my themes css and table css is not my theme.
    I am talking about classic editor.

    Reply
    • Hi Himansu! That sounds like a different tutorial then CSS Grid for Divi but I can take a look if you share a URL to a page that contains a table with an unwanted border.

      Reply
  28. Thank you for the video. I will start using it very soon, as I have stacked columns on some of the pages for my clients. Ok, many of the client sites.

    I will go ahead and try it out, and see how that works, and I will get back to you to show you results. I have been search for something like this for quite some time.

    I’ve also been trying to use the flex option, but it works sometimes, and at times it doesn’t.

    Again, Thanks

    Reply
    • Hi Nikolai! I’ve updated the code now to work for both Theme Builder layouts and non Theme Builder layouts. Please try it out and let me know how it goes. I can also recommend CSS Grid is an option if flexbox doesn’t do the trick.

      Reply
  29. Hi, I have the same problem as Nikolai, it works well in divi builder but not in the frontend. What am I doing wrong?

    Reply
    • problem solved, i had to remove “.et-db #et-boc” and then it worked perfectly!

      Reply
      • Thanks for sharing Migo! The trick is to find a way that works for Theme Builder layouts as well as regular pages and posts. I think I found a way that works for all use cases now, the post is updated.

        Reply
      • Hi, Migo. Thank you so much!

        Reply
  30. Fantastic and straight to the point! It is so nice that you have provided examples of how to use multiple classes and what color the row is – you go the extra mile!!

    My experience:
    I wanted to show my images in 2 rows on mobile and only copied the first segment of the css ( .two-col-mob ) But as everyone knows – the mobile screen sizes differ. So all looks fine in the Visual Builder but on my phone everything looked odd and uneven number of items. The solution was to copy the entire code and use “two-col-mob two-col-tab” as row css class and now it’s pretty! Thank you 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo