CSS Tips to Enhance Divi Mobile Experience

by | Quick Divi Tips | 33 comments

These are some CSS snippets I use all the time. Reverse column order on smaller screen sizes, center-align the text – you can’t go wrong with that.. I used this method on Happily – free wedding page layout. You can see how that works on the “Meet Future Mr & Mrs Smith” section.

1. Reverse column stacking order

First, add a custom CSS class of reverse-columns-mobile to the Row settings, in which you want to reverse the way columns stacks on tablets and phones. Then, in your stylesheet or Divi Theme Options, add this CSS:

@media (max-width:980px) {
	.reverse-columns-mobile {
		display: flex;
		flex-direction: column-reverse;
	}
}

 

2. Center-align Text and Social Follow Modules

If your content looks good left- or right-aligned on desktop, but would look better center-aligned on smaller screen sizes, add a custom CSS class of center-text-mobile in Text Module settings (or a Row, Column or a Section settings if you want to target multiple Text Modules at once), and use this bit of CSS:

@media (max-width:980px) {
	.center-text-mobile,
	.center-text-mobile .et_pb_text_inner,
	.center-text-mobile .et_pb_social_media_follow {
		text-align: center!important;
	}
}

 

3. Remove unwanted column margin

Divi adds a 30px bottom margin to the columns on mobile (and it’s set to 0 for the last column). It may cause unwanted extra space in some situations, and there is no way to remove that within Row settings. We can add a custom class to Column (in Row settings -> Advanced Tab) of no-mobile-margin and this CSS:

@media (max-width:980px) {
	.no-mobile-margin {
		margin-bottom: 0!important;
	}
}

 

If you’d like to use each one of this snippet, you don’t need a separate media query for each. The CSS would look like this:

@media (max-width:980px) {
	.reverse-columns-mobile {
		display: flex;
		flex-direction: column-reverse;
	}
	.center-text-mobile .et_pb_text_inner {
		text-align: center!important;
	}
	.no-mobile-margin {
		margin-bottom: 0!important;
	}
}

Hope you’ll find this useful and if you have any other CSS mobile tips you often use with Divi – let me know in the comments!

Have you seen our Divi Child Themes?

We offer a great selection of high-quality designs to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

33 Comments

  1. Antonio

    Great tutorial for us less knowledgeble in CSS. Thank You.

    Reply
    • Ania Romańska

      Thank you Antonio, I appreciate it!

      Reply
  2. Atif

    Thank you Ania, as always you are very helpful 🙂

    Reply
  3. Jenwar

    Thankx they are great! So useful xx Do you have anything relating to the fullwidth divi slider and how to stop it chopping the background images?
    Its the most frustrating thing! As I do put full images, I know divi says its not for that, but how else can I put my bespoke designs into a slider otherwise? Heres hoping you can help xx

    Reply
    • Ania Romańska

      If you want to make sure the whole image stays always visible – maybe you could just use a Gallery module in the Slider mode (while setting the row to full width).

      Reply
  4. Justin

    Hi Ania, thanks! Quick question – what is a common use case for the reverse column stacking? It sounds quite useful, I just can’t think of a time I’ve needed that. Any particular times you’ve used it as an example? Thanks!

    Reply
    • Kas

      I second to that!

      Reply
    • Ania Romańska

      I think there are many cases it could be useful.. One example – if you look at my Happily page layout (“Meet Future Mr&Mrs Smith” section) you’ll see that on mobile the groom photo would be at the bottom by default, and it looks better before the text from the first column..

      Reply
      • Justin

        Great example Ania, thanks!

  5. Ferenc

    Hi Ania,

    Thanks a lot! Really nice layout, love it. Thanks for sharing your tips.
    Ferenc

    Reply
  6. Mike

    Thanks for the great tutorial Ania!

    How would I go about reversing the order of the first two columns in a three column layout?

    Reply
      • Michael

        I usually duplicate the row and ise one on desktop and te other on mobile

  7. Steven

    This is ace! Thank you, Ania!

    Reply
  8. Daniel

    Hi Ania!

    Thx! Very nice and agreable layout and good and precious tips….!

    Daniel

    Reply
  9. Pierre

    Hi Ania :).

    Thanks for sharing your tips :D! And your layout that I had discovered by one of the Divi FB group is really, really beautiful. I love it :).
    For my part, I’ve a little and simple trick that I want to share with you :).
    I like to center vertically my content in some cases. So for that, I have added a simple CSS rule to all the stylesheets of my childs themes:
    .et_pb_equal_columns >.et_pb_column {
    margin-top:auto;
    margin-bottom:auto;
    }

    BTW, each time I set “Equalize Column Heights” in my “Row Module Settings” > “Design”, I’m sure that all my content will be vertically aligned in my row ;).
    I use it on every website I do.

    Have a great day and thank again Ania.

    Pierre.

    Reply
    • Ania Romańska

      Hi Pierre, Thank you so much for sharing.
      That is a great tip!

      Reply
  10. Kyle

    This is great! Have bookmarked it thank you. Was looking for a resolution to the center align text on mobile issue a few weeks ago.

    Reply
  11. Grant

    Thank you!!!
    I love this, you are a star.
    How do you get the expand effect on the 20% discount module in the page above?

    Grant

    Reply
  12. Roberto

    wow… i cant leave this without sending you a message.

    great tutorial, you are my fav divi designer.

    you should do some divi courses 🙂

    Reply
  13. Aldin

    Thank you for sharing this tutorial… ? helps a lot to the less techie designers… Anyway, have u ever found a way to speed up Divi? I have been tweaking Divi to get a better Page Speed score…

    Reply
  14. Alaminteak

    the tutorial is so amazing, I am looking for the tutorial to modify mobile divi theme and I find it here. Thank you for sharing.

    Reply
  15. Jason K. Dove

    Great information, adds the perfect touches to a design I’ve been working on for a while now. Thank you so much.

    Reply
  16. Jérémie

    Nice piece of information here ?

    Reply
  17. Raffaele

    there is a little mistake in the comment in this page. Try to use % in stand of px. See you 😉

    Reply
  18. elsam samir

    how i can use it in a page in divi library

    Reply
    • Ania Romańska

      You can place the CSS in the Code Module.

      Reply
  19. Katherine

    I’m trying to use the no-mobile-margin code but I’m not sure what I’m doing wrong… I added the css to the page CSS, and I’ve tried adding the class no-mobile-margin to both the row and individual columns. No luck. What am I doing wrong????

    Reply
  20. Kalpana

    thanks Ania for creating and sharing..impressive and actionable..
    looking to forward to reading such article..
    keep updating..

    Reply
  21. Ian

    Hi Ania, the tip on center align text on mobile works great! Thank you.

    However, can you advise how to center align content on full-width blog module (on desktop it look good left aligned, but would like meta, title, short description and read more text centered on mobile)?

    Reply
  22. Levent

    Thank you for this great and valuable article. Been one of my most important favorites. (:

    Reply

Submit a Comment

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

Shares

Pin It on Pinterest