{"id":98029,"date":"2024-01-04T15:25:23","date_gmt":"2024-01-04T15:25:23","guid":{"rendered":"https:\/\/inalbania.al\/?p=98029"},"modified":"2024-01-04T17:25:46","modified_gmt":"2024-01-04T17:25:46","slug":"how-to-change-the-number-of-columns-on-mobile-tablet-in-divi-theme","status":"publish","type":"post","link":"https:\/\/inalbania.al\/al\/how-to-change-the-number-of-columns-on-mobile-tablet-in-divi-theme\/","title":{"rendered":"How To Change The Number Of Columns On Mobile & Tablet In Divi Theme?"},"content":{"rendered":"

Finally! Here\u2019s a solid and easy way to change the number of columns on mobile and tablet in Divi. By adding some custom CSS you\u2019ll get full control over how many columns to display on mobile and tablet in each Divi row.<\/strong><\/p>\n

Unlock 2-6 columns on mobile and tablet with nice spacing between and beneath the columns. This is a more robust solution then some\u00a0quick & dirty fixes<\/em>, for example\u00a0display:flex<\/code>\u00a0or\u00a0width:50%,<\/code>that are shared in various Facebook groups and blogs. We\u2019ll stay consistent by using the same type of code that Divi already uses for desktop columns, and apply it for smaller screens too.<\/p>\n

In the end of the article, I\u2019ll show how you can save time by using the the\u00a0Divi Global Presets<\/strong>\u00a0to change the number of columns on mobile and tablet \u2013 without having to add custom CSS classes to your rows.<\/p>\n

 <\/p>\n

1. Add CSS to enable multiple columns on mobile and tablet in Divi<\/h2>\n

The first step to change the number of columns in Divi for mobile and tablet is to add some custom CSS.<\/p>\n

    \n
  1. Log in to your WordPress dashboard<\/li>\n
  2. Go to\u00a0Divi<\/strong>\u00a0\u00bb\u00a0Theme Customizer<\/strong>\u00a0\u00bb\u00a0Additional CSS<\/strong><\/li>\n
  3. Copy and paste the CSS below:<\/li>\n<\/ol>\n

    Pro tip:<\/strong>\u00a0Copy the entire CSS snippet to access\u00a0all<\/strong>\u00a0the additional column options for mobile and tablet. If you only need one specific option, for example\u00a02 columns on mobile<\/strong>, you only need to copy that specific part of the snippet (row 3-21 below).<\/em><\/p>\n

    \n

    \/*** Change Mobile Columns by https:\/\/inalbania.al ***\/
    \n\/* 2 Columns Mobile *\/
    \n@media all and (max-width: 767px) {
    \nhtml .et-db #et-boc .two-col-mob .et_pb_column {
    \nwidth:47.25% !important;
    \n}<\/strong><\/span><\/p>\n

    html .et-db #et-boc .two-col-mob .et_pb_column:nth-last-child(-n+2) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .two-col-mob .et_pb_column:not(:nth-child(2n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 3 Columns Mobile https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (max-width: 767px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .three-col-mob .et_pb_column {<\/strong><\/span>
    \nwidth:29.6667% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .three-col-mob .et_pb_column:nth-last-child(-n+3) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .three-col-mob .et_pb_column:not(:nth-child(3n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 4 Columns Mobile https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (max-width: 767px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .four-col-mob .et_pb_column {<\/strong><\/span>
    \nwidth:20.875% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .four-col-mob .et_pb_column:nth-last-child(-n+4) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .four-col-mob .et_pb_column:not(:nth-child(4n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 5 Columns Mobile https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (max-width: 767px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .five-col-mob .et_pb_column {<\/strong><\/span>
    \nwidth:15.6% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .five-col-mob .et_pb_column:nth-last-child(-n+5) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .five-col-mob .et_pb_column:not(:nth-child(5n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 6 Columns Mobile https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (max-width: 767px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .six-col-mob .et_pb_column {<\/strong><\/span>
    \nwidth:12.083% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .six-col-mob .et_pb_column:nth-last-child(-n+6) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .six-col-mob .et_pb_column:not(:nth-child(6n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/*** Change Tablet Columns By https:\/\/inalbania.al\u00a0***\/<\/strong><\/span>
    \n\/* 1 Column Tablet *\/<\/strong><\/span>
    \n@media all and (min-width: 768px) and (max-width: 980px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .one-col-tab .et_pb_column {<\/strong><\/span>
    \nmargin-right:0 !important;<\/strong><\/span>
    \nwidth:100% !important;<\/strong><\/span>
    \n}<\/strong><\/span><\/p>\n

    html .et-db #et-boc .one-col-tab .et_pb_column:not(:last-child) {<\/strong><\/span>
    \nmargin-bottom:30px !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 2 Columns Tablet https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (min-width: 768px) and (max-width: 980px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .two-col-tab .et_pb_column {<\/strong><\/span>
    \nwidth:47.25% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n.two-col-tab .et_pb_column:nth-last-child(-n+2) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .two-col-tab .et_pb_column:not(:nth-child(2n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 3 Columns Tablet https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (min-width: 768px) and (max-width: 980px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .three-col-tab .et_pb_column {<\/strong><\/span>
    \nwidth:29.6667% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .three-col-tab .et_pb_column:nth-last-child(-n+3) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .three-col-tab .et_pb_column:not(:nth-child(3n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 4 Columns Tablet https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (min-width: 768px) and (max-width: 980px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .four-col-tab .et_pb_column {<\/strong><\/span>
    \nwidth:20.875% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .four-col-tab .et_pb_column:nth-last-child(-n+4) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .four-col-tab .et_pb_column:not(:nth-child(4n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 5 Columns Tablet https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (min-width: 768px) and (max-width: 980px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .five-col-tab .et_pb_column {<\/strong><\/span>
    \nwidth:15.6% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n.five-col-mob .et_pb_column:nth-last-child(-n+5) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span><\/p>\n

    html .et-db #et-boc .five-col-tab .et_pb_column:not(:nth-child(5n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span>
    \n\/* 6 Columns Tablet https:\/\/inalbania.al*\/<\/strong><\/span>
    \n@media all and (min-width: 768px) and (max-width: 980px) {<\/strong><\/span>
    \nhtml .et-db #et-boc .six-col-tab .et_pb_column {<\/strong><\/span>
    \nwidth:12.083% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .six-col-tab .et_pb_column:nth-last-child(-n+6) {<\/strong><\/span>
    \nmargin-bottom:0;<\/strong><\/span>
    \n}<\/strong><\/span>
    \nhtml .et-db #et-boc .six-col-tab .et_pb_column:not(:nth-child(6n)) {<\/strong><\/span>
    \nmargin-right:5.5% !important;<\/strong><\/span>
    \n}<\/strong><\/span>
    \n}<\/strong><\/span><\/p>\n

    \n
    \n
    \n
    \n

    Available mobile columns options:<\/h3>\n<\/div>\n<\/div>\n
    \n
    \n
      \n
    • \n
      \uf058<\/span><\/span>1 column on mobile<\/span><\/div>\n<\/li>\n
    • \uf058<\/span><\/span>2 columns on mobile<\/span><\/li>\n
    • \uf058<\/span><\/span>3 columns on mobile<\/span><\/li>\n
    • \uf058<\/span><\/span>4 columns on mobile<\/span><\/li>\n
    • \uf058<\/span><\/span>5 columns on mobile<\/span><\/li>\n
    • \uf058<\/span><\/span>6 columns on mobile<\/span><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n
      \n
      \n
      \n

      Available tablet columns options<\/h3>\n<\/div>\n<\/div>\n
      \n
      \n
        \n
      • \n
        \uf058<\/span><\/span>1 column on tablet<\/span><\/div>\n<\/li>\n
      • \uf058<\/span><\/span>2 columns on tablet<\/span><\/li>\n
      • \uf058<\/span><\/span>3 columns on tablet<\/span><\/li>\n
      • \uf058<\/span><\/span>4 columns on tablet<\/span><\/li>\n
      • \uf058<\/span><\/span>5 columns on tablet<\/span><\/li>\n
      • \uf058<\/span><\/span>6 columns on tablet<\/span><\/li>\n<\/ul>\n

        2. Add CSS Classes to your Divi Rows to change the number of columns on mobile and tablet<\/h2>\n

        To apply the new column count for mobile and tablet you need to\u00a0add the matching CSS class(es)<\/strong>\u00a0to your Divi row. That will actually take less time than reading this paragraph of text.<\/p>\n

          \n
        1. Enable the Divi Visual Builder on the page that you want to edit<\/li>\n
        2. Edit the row (that\u2019s the box with the green border) by clicking the cogwheel<\/li>\n
        3. Go to\u00a0Advanced<\/strong>\u00a0\u00bb\u00a0CSS ID & Classes<\/strong>\u00a0\u00bb\u00a0CSS Class<\/strong><\/li>\n
        4. Add one or two CSS classes, matching the number of columns that you want to use, from the table below.<\/li>\n<\/ol>\n

          Please notice:<\/strong>\u00a0Sometimes, 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.<\/em><\/p>\n<\/div>\n

          \n
          \n
          \n
          \n

          Number of columns<\/h4>\n<\/div>\n<\/div>\n<\/div>\n
          \n
          \n
          \n

          Mobile CSS class<\/h4>\n<\/div>\n<\/div>\n<\/div>\n
          \n
          \n
          \n

          Tablet CSS class<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
          \n
          \n
          \n
          \n

          One<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          [no class needed]<\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          one-col-tab<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n
          \n

          Two<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          two-col-mob<\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          two-col-tab<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n
          \n

          Three<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          three-col-mob<\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          three-col-tab<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n
          \n

          Four<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          four-col-mob<\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          four-col-tab<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n
          \n

          Five<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          five-col-mob<\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          five-col-tab<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n
          \n

          Six<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          six-col-mob<\/p>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n

          six-col-tab<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

          \n
          \n
          \n
          \n

          The table above is actually a live example of this code using the classes \u201cthree-col-mob three-col-tab\u201d to display three columns on tablet and three columns on mobile (the same as on desktop).<\/p>\n<\/div>\n

          3. Pro Tip: Use Divi Global Presets To Change Number Of Columns on Mobile And Tablet<\/h2>\n

          This last step is not necessary but it\u2019s a nice way to speed up your design process by adding different mobile row structures to your Divi Global Presets library.<\/p>\n

          This way, you don\u2019t 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\u00a0Presets dropdown<\/strong>\u00a0when you add a new row.<\/p>\n

          Changing mobile row numbers with Divi Global Presets<\/h3>\n
            \n
          1. Make sure that you have added the custom CSS in the\u00a0Theme Customizer<\/strong>\u00a0(see step 1 above)<\/li>\n
          2. Create a new row on a page, a post or in a layout in the Divi Library.\u00a0It does not matter which column structure you choose for the row.<\/em><\/li>\n
          3. Close the\u00a0Insert Module<\/strong>\u00a0modal and open the\u00a0Row Settings<\/strong>\u00a0by clicking the cogwheel<\/li>\n
          4. Go to\u00a0Advanced<\/strong>\u00a0\u00bb\u00a0CSS ID & Classes<\/strong><\/li>\n
          5. Enter the CSS Class(es) that you want to add to your preset (see step 2 above) \u2013 for example\u00a0two-col-mob four-col-tab<\/strong><\/li>\n
          6. Now, click the\u00a0Preset: Default<\/strong>\u00a0toggle in the purple top bar of the\u00a0Row Settings<\/strong><\/li>\n
          7. Click\u00a0Create new preset from current styles<\/strong><\/li>\n
          8. Give your new\u00a0Preset<\/strong>\u00a0a clear name, for example\u00a02 col mob | 4 col tab<\/strong><\/li>\n
          9. Make sure that\u00a0Assign Preset To Default<\/strong>\u00a0is set to\u00a0NO\u00a0<\/strong>and save by clicking the green checkmark button<\/li>\n
          10. Repeat the process to add as many\u00a0Row Presets<\/strong>\u00a0you like.<\/li>\n<\/ol>\n

            That\u2019s 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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

            How To Change The Number Of Columns On Mobile & Tablet In Divi Theme?<\/p>\n","protected":false},"author":1,"featured_media":4307,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[183],"tags":[69204,69205,69206],"class_list":["post-98029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aktualitet","tag-how-to-change-the-number-of-columns-on-mobile-tablet-in-divi-theme","tag-how-to-change-the-number-of-columns-on-mobile-tablet-in-divi","tag-how-to-change-the-number-of-columns-on-mobile-in-divi-theme"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/posts\/98029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/comments?post=98029"}],"version-history":[{"count":0,"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/posts\/98029\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/media\/4307"}],"wp:attachment":[{"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/media?parent=98029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/categories?post=98029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inalbania.al\/al\/wp-json\/wp\/v2\/tags?post=98029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}