Reducing padding in a Divi Row
When you create a page with Divi you will notice that by default, it has quite a generous amount of padding space.
Here is the example before.

What we are looking is tighten this up and align. We want to make sure that the button is better aligned on desktop only as forcing extra padding can cause it to disappear on mobile or tablet sized screens. We did this by adding the below code to the custom CSS box in Divi theme options:
.home .et_pb_section,.home #main-content .et_pb_section { padding: 0; }
.home .et_pb_section,.home #main-content .et_pb_section .et_pb_row{ padding: 0; width: 100%; }
@media only screen and (min-width: 1024px) {
.et_pb_row .et_pb_button {
position: relative;
top: 60px;
}
}
The end result is like this below. I vertically aligned the button as from this post.

Subscribe to:
Post Comments
(Atom)
Tags
Blogger
(5)
buttons
(1)
css
(2)
divi
(72)
elegant themes
(43)
extra
(7)
gravity forms
(9)
jQuery
(3)
ownCloud
(1)
ProtonMail
(3)
Reddit
(2)
responsive
(1)
tables
(1)
vanilla forums
(3)
whmcs
(3)
wordpress
(38)

Top snippets
- DIVI menu text bold on hover
- How to remove the responsive functionality from Elegant Themes Exlorable
- Move secondary Menu in DIVI below the Primary Menu
- Disable pause on hover for DIVI slider module
- Disiable Mobile Menu from showing with DIVI theme
- Add Thin Colored Line Under Menu in DIVI
- How to center align the Gravity Forms submit button
- Integrating Gravity forms with DIVI
- Vertically align Divi button
- Move DIVI Fullwidth Slider Text to Left or Right
