Updated:
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! 🙂
Thanks for the post. I applied a similar code but now my fullwidth post title module does not stretch across the screen on moblie. This is the code i used:
@media only screen and (max-width: 980px) {
#top-header > .container,
#main-header > .container,
#et_search_outer > .container,
#main-content > .container,
#main-footer > .container,
#et-footer-nav > .container,
#footer-bottom > .container,
div.et_pb_row,
div.et_pb_row.et_pb_row_fullwidth {
width: 95% !important;
}
}
You can check my site to see it. thenobleteam.com/hello-world
Which part of the code is affecting it? And kindly rewrite the code above as i am an amateur in css.
Will appreciate if you could help. Thank you.
Really nice! Such a simple fix that makes a massive difference to styling.
Thanks v much!
Hey thanks Matt! Appreciate you stopping by!