CSS Tips to Enhance Divi Mobile Experience

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!

Shares

Have you seen our

Divi child themes?

Divi Toolbox plugin?

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

52 Comments

  1. Lisa

    Any idea how to accomplish reverse-columns for mobile this on a specialty section?

    Reply
  2. Afsal Shameer

    Hello Ania. Is there any css code to make a button full screen on mobile? Thanks in advance.

    Reply
    • Ania Romańska

      You should be able to achieve this using the Sizing options in the Builder.

      Reply
  3. imti

    Hi, i try to center DIVI Email optin in landscape view in mobile, can you help me with.
    Thanks

    Reply
    • Ania Romańska

      Can you share a link?

      Reply
  4. Tracy

    Thank you for this!! This saved me so much time.

    Reply
  5. Gegli

    like as always Ania thank you

    Reply
  6. Bjarne Oldrup

    I keep returning to this blog post when I need reverse column order on mobiles – its absolutely the most neat solution I’ve seen.

    Thank you so much for sharing 🙂

    Reply
  7. Charles Seminara

    I pasted your css code to center the text on mobile.
    @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;
    }
    }

    I get an Expected BRACE drror after line 1 and 2 Unexpected token ‘}’ errors after line 5.

    Reply
    • Ania Romańska

      There is no errors in the code you just posted.

      Reply
      • Jan

        Hi Ania,
        thanks for your great videos!
        I actually have the same problem with the code, it gives me the same error as Charles Seminara wrote. Am I doing something wrong? Where could my mistake be? I think I did it the exact way you advised.
        Thanks so much for your help!

        Best regards
        Jan

      • Ania Romańska

        Hi,
        The code Charles pasted didn’t have any errors. Where are you adding it? Maybe there is an error with your code before the part you are pasting(?)

  8. Sergey Vichev

    Hi, Anya. Your tutorial is just great! Could you please advise how to center a button in a similar way? Thank you in advance!

    Reply
    • Ania Romańska

      Hi, to center button you need to add a custom CSS class to the parent element (row or section) for example: btn-center-mobile, and then, in your CSS, inside media query, add this:

      .btn-center-mobile .et_pb_button_module_wrapper {text-align:center;}
      Reply
  9. Sarah Evans

    Thanks for this great tutorial Ania. Can you advise the correct CSS to centre the title text on a full width header on mobile? I’m stuck!

    Reply
  10. Julie Zommers

    Fabulous! Just what I needed, thank you so much.

    Reply
  11. John

    Is There any way to display two products in a single row(mobile layout), Not in Desktop Website.

    Reply
  12. Nipun

    I have been using Divi theme for Desktop Sites but mobile versions does not come out that great. But will definitely try these CSS Codes specially for excess margin on mobile device

    Reply
  13. Mazhar Imam

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

    Reply
  14. Levent

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

    Reply
  15. 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
  16. Kalpana

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

    Reply
  17. 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
  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. Raffaele

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

    Reply
  20. Jérémie

    Nice piece of information here ?

    Reply
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. Daniel

    Hi Ania!

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

    Daniel

    Reply
  29. Steven

    This is ace! Thank you, Ania!

    Reply
  30. 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

  31. Ferenc

    Hi Ania,

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

    Reply
  32. 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!

  33. 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
  34. Atif

    Thank you Ania, as always you are very helpful 🙂

    Reply
  35. Antonio

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

    Reply
    • Ania Romańska

      Thank you Antonio, I appreciate it!

      Reply

Submit a Comment

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

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.