CSS Tips to Enhance Divi Mobile Experience

by  | Quick Divi Tips | 44 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!