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!
Any idea how to accomplish reverse-columns for mobile this on a specialty section?
Hello Ania. Is there any css code to make a button full screen on mobile? Thanks in advance.
You should be able to achieve this using the Sizing options in the Builder.
Hi, i try to center DIVI Email optin in landscape view in mobile, can you help me with.
Thanks
Can you share a link?
Thank you for this!! This saved me so much time.
like as always Ania thank you
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 🙂
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.
There is no errors in the code you just posted.
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
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(?)
Hi, Anya. Your tutorial is just great! Could you please advise how to center a button in a similar way? Thank you in advance!
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:
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!
Fabulous! Just what I needed, thank you so much.
Is There any way to display two products in a single row(mobile layout), Not in Desktop Website.
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
Hi Ania, the tip on center align text on mobile works great! Thank you.
Thank you for this great and valuable article. Been one of my most important favorites. (:
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)?
thanks Ania for creating and sharing..impressive and actionable..
looking to forward to reading such article..
keep updating..
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????
how i can use it in a page in divi library
You can place the CSS in the Code Module.
there is a little mistake in the comment in this page. Try to use % in stand of px. See you 😉
Nice piece of information here ?
Great information, adds the perfect touches to a design I’ve been working on for a while now. Thank you so much.
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.
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…
wow… i cant leave this without sending you a message.
great tutorial, you are my fav divi designer.
you should do some divi courses 🙂
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
Thank you Grant.
This tutorial should get you started on the expanding section – How to create and expanding CTA like Elegant Themes
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.
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.
Hi Pierre, Thank you so much for sharing.
That is a great tip!
Hi Ania!
Thx! Very nice and agreable layout and good and precious tips….!
Daniel
Very usefull thanks for sharing any…
This is ace! Thank you, Ania!
Thanks for the great tutorial Ania!
How would I go about reversing the order of the first two columns in a three column layout?
You should look at the order css property of the column. I’ll try to do some in-depth tutorial on this topic. In the meantime this article should help: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I usually duplicate the row and ise one on desktop and te other on mobile
Hi Ania,
Thanks a lot! Really nice layout, love it. Thanks for sharing your tips.
Ferenc
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!
I second to that!
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..
Great example Ania, thanks!
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
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).
Thank you Ania, as always you are very helpful 🙂
Great tutorial for us less knowledgeble in CSS. Thank You.
Thank you Antonio, I appreciate it!