Last Updated on July 3, 2019
Make Your Entire Divi Site Wider on Mobile
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks.
Example:
default 80% width
Problem:
Have you ever wanted your whole site to be a bit wider on mobile? Sometimes it looks better with less space on the sides, or maybe you just want to be able to utilize all the space you can.
Fix:
With a snippet of CSS we can change the width of every row on the site on mobile (and tablet) only. I’ve used this with fullwidth and regular-width rows without issue as I think Divi’s rows are all set to the same width regardless of module settings, but if you have problems please comment and I can help!
The CSS code goes in your Divi custom CSS box or child stylesheet, adjust the % to your liking:
{;} css code
/*** MAKE SITE WIDER ON SMALLER SCREENS ***/
@media only screen and (max-width: 980px) {
.et_pb_row {
width: 90%; /*** you might need !important ***/
}
}
90% width
100% width
That’s a great solution for a typical problem. I really don’t know why is this not a built-in option in Divi.
One question: how can I do this only on one page at my site? I only need to do it on my blog page but this code changes the entire site. Thanks!
Hi Alex! Yes you can do this on one page! In the Divi builder every page has a spot for CSS to only apply to that page, I think the symbol is three little lines, it almost looks like a hamburger menu icon. When you open that you’ll see a CSS box and color palette. You can email me if you have trouble locating.
How would I accomplish this for Divi Fullwidth Header module? Content on Fullwidth Header module (mobile version of my site) is so narrow. I would like the text to be wider.
Thanks!
Hi Ross! Thanks for your patience, I’m a bit behind because of the holiday week.
There are two places you can adjust the width actually. The first is the inner most container holding the actual text. I’m changing the default width of 80% to 100%.
Then there’s also the outer container, which you may not need to adjust at all after adjusting the first one. Totally just depends on how skinny you want it. The default is also 80% so I’m adjusting to 90% to still have some space on the sides:
@media only screen and (max-width: 980px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content {
width: 100%;
}
.et_pb_fullwidth_header .et_pb_fullwidth_header_container.center {
width: 90%;
}
}
That’s going to adjust it up to tablet portrait size so you can lower that 980px if you need. 480px and 767px are other standard breakpoints.
Screenshot: https://ibb.co/1YVqtbw
Hi Leslie,
Would you happen to know how to prevent H1 titles from breaking in the middle of a word once the line reaches the edge of the page? I’m referring to mobile view. I used the code you provided and it helped with making the page wider on mobile but the title text still spills over.
My site is http://themoneymarket.co/about. If you have any suggestions that would be great.
Regina
Thanks so much! This is exactly what I needed. I’ve always thought content looked squished on mobile when using Divi.
PS. My site-in-progress should be below, if you want to take a look.
Update: I just realized I read about you in an old ET blog post! Awesome.
Lol yes, that article brought me a lot of business when I really needed it. Forever grateful to ET 🙂
Thanks Joshua! So glad you found this helpful!
Thanks so much! How simple was that? I was roaming through Divi thinking about custom widths and never thought to just media query the row width.
I love your Next/Previous posts on your single page posts. Are you using a plugin, custom code or some tweak with Divi Builder?
We are looking for a solution on a blog that has hundreds of posts, so Divi Builder is not an option.
Thanks again for this little bit of genius! Made the site look 10 times better in 24 seconds flat.
Hi Matt!! Thanks so much, glad it helped! And for the single post navigation I am using a plugin and then styled it to match.
It works perfectly but the only thing it doesn’t have that I wish it did was to display the categories directly under the title, but it’s not a biggie.
You can find it here: https://codecanyon.net/item/next-post-fly-box-for-wordpress/3020948
Thx for stopping by! 🙂
Really nice! Such a simple fix that makes a massive difference to styling.
Thanks v much!
Hey thanks Matt! Appreciate you stopping by!
ABSOLUTELY LOVE THIS BIT OF CODE! Thanks so much! I’m only having one issue 🙁 The css is working fine on all my pages but not on my posts. Is there a code I can add for it to go to my posts as well?? Thanks so much, you are awesome!
Hi Arthur! Thanks so much for your kind words 🙂 Did you try adding !important like the notes say? Your code would look something like this:
width: 90% !important;
let me know if that doesn’t work.
Hi! This worked perfectly. One question: Is there anyway to adjust only the width of media (just photos and videos)?
I’d like the photo and video content on my page to be full width but not the text.
Hi Allie! Probably the easiest solution would be to edit the max-width for mobile/tablet in whatever module your text is in. For instance in a text module you can change the max-width to 70% (or whatever %) and the text will look skinnier than the images/videos on smaller devices. Let me know if that doesn’t work for you, gorgeous work by the way!
Thanks for the code! Exactly what I needed to make it look better on mobile!
Thanks Tricia, glad it helped!