Last Updated on July 3, 2019
Center Align Divi Fullwidth Header Buttons 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:
Problem:
When using the fullwidth header module the second button has a left margin of 15px set so that there’s a space between it and the first button. Unfortunately the space is still there on mobile and it shouldn’t be, but we can fix this with a short snippet of CSS code.
Fix:
The code below goes in your child stylesheet or in Divi theme options > general > Custom CSS box. You’ll probably need to clear your cache to see it take effect.
Photo used with permission.
{;} css code
@media only screen and (max-width: 480px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {
margin-left: 0;
}
}
Cheers. Saved me some time 🙂
Sweet!! Thx Charles!
Thank you 🙂
Thanks for stopping by Dan!
You are a genius! Just saved me hours I’m sure. Thank you 🙂
Haha! Glad to help Gaye! 😀
Huge thank you! Why this isn’t there as standard, I don’t know…
Glad it helped Joe! And I totally agree 😉
Completely agree! Less features more fixes, looking at your Elegant Themes. 😉
What about the fullwidth slider? Tried to pull the css class but it doesn’t seem to be working? Can you help? Thank you!!
Hi Chris! I’m not sure I’m understanding, can you post a link so I can see what you mean? Or email it to me at agirlandhermac@gmail.com
I figured it out:) I used this code for fullwidth slider module.
@media (max-device-width: 500px) {
.et_pb_more_button {
margin-left: 0px;
}
}
Awesome! Glad you got it sorted 🙂
Hi Chris,
Where did you put this? I put it in the CSS for Divi and it didnt adjust my sliders.
Hi all – I am having the same issue with the fullwidth slider buttons. Where did you put this code? I’ve tried adding it to the Custom CSS in the Slider Button field, but the buttons are still not centered. TIA!!!
Because his code has a media query it should go in Divi options > custom CSS box. Try that and see if it works 🙂
Wonderful that there are such helpful people like you!
/* button fix */
@media screen and (max-width: 600px) {
.et_pb_button, .chris-button-fix {
margin-left: 0px!important;
margin-right: 10px!important;
}
}
Hello, thanks for this information but now I am confused. My website is designed with the theme: Virtue premium, and from now I am going to use Divi. I want to change my web design litle by little from theme virtue premium to divi theme. I decided to upload a layout page by page. I tried it creating a new page but it looks like a layout inside or another containner (there is space and it doesnt look like is fullwidth. What could I do? I will apreciate your advice. Thank you very much,
Hi Catalina! I’m afraid I don’t have any experience with that theme and I’ve never used the Divi builder plugin with another theme before so I’m not really sure what the differences are as far as customizing with CSS. I would recommend that you join some of the Divi Facebook groups and ask for help in those, they’re incredibly helpful, or open a support ticket with ET as they’ve recently improved their support system.
Thank you
Thanks for stopping by! 🙂
I tried this in my child style.css and it did not have any effect. But when I put it in divi’s theme options custom css, it worked. Not a cache issue, because I have gone back and forth several times to test it. Any idea why this would be the case? Thanks BTW for the fix! It’s just frustrating that I can’t figure out why it won’t work in the child style.css. (Yes, other things in the child style.css do work, to I think it’s enqueueing properly.)
Hi Mick! This has happened to me before, the way it was explained to me was that it has to do with the order of the loading of the files *but* it could also still have to do with caching. It really depends on what kind of caching you’re using. It could be the browser cache, the server cache, if you’re using a CDN the could be the cache could need clearing there, etc. so I wouldn’t rule out cache just yet but I’m afraid I don’t have a definitive answer. Appreciate you using my tutorial though! 😀
Thank you so much! Time saver, your code fixed this displaying issue straight away. Kudos 🙌🏾.
Thanks Diana!
shame on divi for not fixing this for years…
Thank you! I appreciate you.
I Need fix for this. I added the code but I’m not seeing the change. Any assistance will be appreciated. Thanks.
Hi Marlon! Try this instead:
@media only screen and (max-width: 480px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_one {
margin-right: 0;
}
}
Thanks for this useful code!