contact section.json
File
990f1e35-e14b-4e6c-96be-9ee129a344e3.png
Today 9:35 AM
6c1b959b-0a29-4e0f-a851-aade5ecd0836.png
I want the image to be right against the right-hand side of the screen,and,you know,smooth everything on the top header section equally to the bottom of the page. Some,some width,so it's not squashed together like that.

Yes—I understand. The hero row is currently constrained and centred, which leaves that white strip on the far right and squeezes the heading against the photograph.

Set the hero up like this in Divi 5:

1. Hero section
Open the blue Section settings:

Left padding: 0

Right padding: 0

Keep the existing top and bottom padding at 0

2. Hero row
Open the green Row settings:

Design → Sizing

Width: 100%

Maximum Width: none or 100%

Design → Layout

Horizontal Gap: 0

Column proportions: approximately 45% / 55%

Align Items: Stretch

This allows the photograph to reach the right edge of the browser.

3. Right image column
Open the right Column settings:

Padding: 0 on all four sides

Margin: 0 on all four sides

Then open the Image module:

Width: 100%

Maximum Width: 100%

Show Space Below Image: Off

Height: 100%

Under Advanced → CSS → Module Elements → Image, enter:

width: 100%;
height: 100%;
object-fit: cover;
display: block;
4. Left text column
The left content must still line up with the logo and the rest of the page. Open the left Column and put this under Advanced → CSS → Free-Form CSS:

selector {
    padding-left: max(40px, calc((100vw - 1400px) / 2));
    padding-right: 60px;
}
This gives the hero a full-width photograph while keeping the heading aligned with a consistent 1400px site container.

Also reduce the desktop hero heading slightly if “PLACE IT.” still touches the photograph—around 96px–100px should fit comfortably. The final result will have more breathing room on the left and no white gap on the right.


Okay, it's working now. Let's scrolling down with a 120. That's not working.
The scroll-margin-top:120px on the individual sections is probably being ignored by Divi’s scrolling behaviour.
Replace it with a global page offset.
Go to Divi → Theme Options → General → Custom CSS and add:html{scroll-padding-top:120px;scroll-behavior:smooth}@media (max-width:980px){html{scroll-padding-top:90px}}Then check each target section:Advanced → CSS ID & Classes
CSS ID should be only:services,projects,why-choose,or contact
Do not include the # in the CSS ID
Menu links should include the #,for example:#services
Remove the previous scroll-margin-top CSS to prevent conflicting settings. Save the Divi page,clear Divi’s static CSS cache and reload with Ctrl+F5.
.et_pb_scroll_top.et-pb-icon{background:#E6007E;color:#ffffff}@media only screen and (max-width:980px){#mobile_menu li a{color:#ff6600}#et_search_icon:hover,.mobile_menu_bar:before,.mobile_menu_bar:after,.et_toggle_slide_menu:after{color:#004fb5!important}.et_mobile_nav_menu:before{content:'MENU';position:absolute;right:40px;margin-top:5px;color:#333;font-size:16px}#et_mobile_nav_menu:before{content:'MENU';position:absolute;right:33px;bottom:30px;color:#333;font-size:16px}.et_mobile_menu{min-width:100vw;margin-left:-11vw}.et_mobile_menu li{text-align:center!important}.et_mobile_menu li li,.et_mobile_menu li ul{padding-left:0!important}.mobile_nav.opened .mobile_menu_bar:before{content:'\4d';color:#ff6f0e!important}.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a{transition:color 300ms ease 0ms;color:#0c139f!important}ol li{font-size:1em!important;color:#333!important}ol li::marker{font-size:1.2em!important;color:#000!important}.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu,.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul{background-color:#000000!important}.et_pb_menu_0_tb_header.et_pb_menu ul li>a,.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a,.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a,.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li.current-menu-item a{color:#cd0000!important}.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu a{color:#868788!important;text-transform:uppercase!important}}.et_mobile_menu li a{font-size:18px!important;text-transform:uppercase!important}@media (min-width:981px){.legacy-mobile-header{display:none!important}}@media (max-width:980px){.legacy-desktop-header{display:none!important}}@media (max-width:980px){.legacy-mobile-header{display:block!important;visibility:visible!important;opacity:1!important;background:#FFFFFF!important;position:sticky!important;top:0!important;z-index:99999!important;padding-top:8px!important;padding-bottom:8px!important}.legacy-mobile-header .et_pb_row{width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0 18px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:54px
minmax(0,1fr)
54px!important;align-items:center!important;column-gap:0!important}.legacy-mobile-header .et_pb_column{width:auto!important;margin:0!important;padding:0!important;float:none!important}.legacy-mobile-header .et_pb_column:first-child{grid-column:2!important;justify-self:center!important;align-self:center!important}.legacy-mobile-header .et_pb_column:last-child{grid-column:3!important;justify-self:end!important;align-self:center!important}.legacy-mobile-header .et_pb_module{margin:0!important;padding:0!important}.legacy-mobile-header .et_pb_image,.legacy-mobile-header .et_pb_image .et_pb_image_wrap{display:block!important;text-align:center!important;margin:0 auto!important;line-height:0!important}.legacy-mobile-header .et_pb_image img{display:block!important;width:auto!important;max-width:190px!important;height:auto!important;margin:0 auto!important}.legacy-mobile-header .et_pb_menu{background:transparent!important;width:auto!important;margin:0!important;padding:0!important}.legacy-mobile-header .et_pb_menu_inner_container,.legacy-mobile-header .et_pb_menu__wrap{display:flex!important;align-items:center!important;justify-content:flex-end!important;width:auto!important;margin:0!important;padding:0!important}.legacy-mobile-header .et_pb_menu__logo,.legacy-mobile-header .et_pb_menu__logo-wrap{display:none!important}.legacy-mobile-header .mobile_nav,.legacy-mobile-header .mobile_menu_bar{margin:0!important;padding:0!important;line-height:1!important}}@media (max-width:980px){.legacy-mobile-header .mobile_menu_bar::before{content:""!important;display:none!important}.legacy-mobile-header .mobile_menu_bar::after{content:"MENU"!important;display:inline-block!important;font-family:"IBM Plex Mono",monospace!important;font-size:12px!important;font-weight:600!important;letter-spacing:0.18em!important;color:#181818!important;line-height:1!important}.legacy-mobile-header
.mobile_nav.opened
.mobile_menu_bar::after{content:"CLOSE"!important;color:#FFFFFF!important}}@media (max-width:980px){.legacy-mobile-header .et_mobile_menu{display:block!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100svh!important;min-height:100svh!important;max-height:100svh!important;background:#181818!important;z-index:999999!important;padding:150px 0 40px!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;border-top:none!important;opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden;transition:opacity 600ms ease,transform 650ms ease,visibility 0s linear 650ms}.legacy-mobile-header
.mobile_nav.opened
.et_mobile_menu{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;transition:opacity 600ms ease,transform 650ms ease,visibility 0s}.legacy-mobile-header
.mobile_nav.closed
.et_mobile_menu{opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden}.legacy-mobile-header .mobile_menu_bar{position:relative!important;z-index:1000000!important}.legacy-mobile-header .et_mobile_menu li{margin:0!important;padding:0!important}.legacy-mobile-header .et_mobile_menu li a{font-family:"Barlow Condensed",sans-serif!important;font-size:32px!important;font-weight:700!important;line-height:1.05em!important;padding:14px 32px!important;text-transform:uppercase!important;letter-spacing:0!important;color:#FFFFFF!important;border-bottom:none!important}.legacy-mobile-header .et_mobile_menu li a:hover{color:#FF2B85!important;opacity:1!important}.legacy-mobile-header
.et_mobile_menu
li.current-menu-item>a{color:#FF2B85!important}.legacy-mobile-header .et_mobile_menu,.legacy-mobile-header .mobile_nav,.legacy-mobile-header .et_pb_menu__wrap,.legacy-mobile-header .et_pb_menu_inner_container{border-top:none!important;border-bottom:none!important}}html{scroll-padding-top:120px!important}#home,#equipment,#projects,#why-choose-us,#process,#contact{scroll-margin-top:120px!important}html{scroll-padding-top:120px;scroll-behavior:smooth}@media (max-width:980px){html{scroll-padding-top:90px}}Yes,must,please do edit for me.
Done. I cleaned and corrected the complete stylesheet:Download the cleaned Vibrant CSS
Now:Go to Divi → Theme Options → General → Custom CSS.
Remove all the existing CSS.
Open the downloaded file and copy everything into Custom CSS.
Save Changes.
Clear Divi → Theme Options → Builder → Advanced → Clear Static CSS File Generation.
Refresh the website with Ctrl+F5.
The cleaned version:Removes conflicting old mobile-menu rules.
Uses Vibrant pink consistently.
Preserves your desktop and full-screen mobile headers.
Keeps only one scrolling configuration.
Uses a 120px desktop anchor offset.
Uses a 90px mobile anchor offset.
Retains smooth scrolling and reduced-motion support.
vibrant-clean-custom-css.css
Code
Library
/
Vibrant with impeccable
/
vibrant-clean-custom-css.css
.et_pb_scroll_top.et-pb-icon{background:#f50057;color:#ffffff}ol li{font-size:1em!important;color:#333333!important}ol li::marker{font-size:1.2em!important;color:#000000!important}@media (min-width:981px){.legacy-mobile-header{display:none!important}}@media (max-width:980px){.legacy-desktop-header{display:none!important}}@media (max-width:980px){.legacy-mobile-header{display:block!important;visibility:visible!important;opacity:1!important;background:#ffffff!important;position:sticky!important;top:0!important;z-index:99999!important;padding-top:8px!important;padding-bottom:8px!important}.legacy-mobile-header .et_pb_row{width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0 18px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:54px minmax(0,1fr) 54px!important;align-items:center!important;column-gap:0!important}.legacy-mobile-header .et_pb_column{width:auto!important;margin:0!important;padding:0!important;float:none!important}.legacy-mobile-header .et_pb_column:first-child{grid-column:2!important;justify-self:center!important;align-self:center!important}.legacy-mobile-header .et_pb_column:last-child{grid-column:3!important;justify-self:end!important;align-self:center!important}.legacy-mobile-header .et_pb_module{margin:0!important;padding:0!important}.legacy-mobile-header .et_pb_image,.legacy-mobile-header .et_pb_image .et_pb_image_wrap{display:block!important;text-align:center!important;margin:0 auto!important;line-height:0!important}.legacy-mobile-header .et_pb_image img{display:block!important;width:auto!important;max-width:190px!important;height:auto!important;margin:0 auto!important}.legacy-mobile-header .et_pb_menu{background:transparent!important;width:auto!important;margin:0!important;padding:0!important}.legacy-mobile-header .et_pb_menu_inner_container,.legacy-mobile-header .et_pb_menu__wrap{display:flex!important;align-items:center!important;justify-content:flex-end!important;width:auto!important;margin:0!important;padding:0!important}.legacy-mobile-header .et_pb_menu__logo,.legacy-mobile-header .et_pb_menu__logo-wrap{display:none!important}.legacy-mobile-header .mobile_nav,.legacy-mobile-header .mobile_menu_bar{margin:0!important;padding:0!important;line-height:1!important}}@media (max-width:980px){.legacy-mobile-header .mobile_menu_bar::before{content:""!important;display:none!important}.legacy-mobile-header .mobile_menu_bar::after{content:"MENU"!important;display:inline-block!important;font-family:"IBM Plex Mono",monospace!important;font-size:12px!important;font-weight:600!important;letter-spacing:0.18em!important;color:#181818!important;line-height:1!important}.legacy-mobile-header .mobile_nav.opened .mobile_menu_bar::after{content:"CLOSE"!important;color:#ffffff!important}}@media (max-width:980px){.legacy-mobile-header .et_mobile_menu{display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;min-height:100svh!important;max-height:100svh!important;background:#181818!important;z-index:999999!important;padding:150px 0 40px!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;border:none!important;opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden;transition:opacity 600ms ease,transform 650ms ease,visibility 0s linear 650ms}.legacy-mobile-header .mobile_nav.opened .et_mobile_menu{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;transition:opacity 600ms ease,transform 650ms ease,visibility 0s}.legacy-mobile-header .mobile_nav.closed .et_mobile_menu{opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden}.legacy-mobile-header .mobile_menu_bar{position:relative!important;z-index:1000000!important}.legacy-mobile-header .et_mobile_menu li{margin:0!important;padding:0!important;text-align:center!important}.legacy-mobile-header .et_mobile_menu li li,.legacy-mobile-header .et_mobile_menu li ul{padding-left:0!important}.legacy-mobile-header .et_mobile_menu li a{font-family:"Barlow Condensed",sans-serif!important;font-size:32px!important;font-weight:700!important;line-height:1.05em!important;padding:14px 32px!important;text-transform:uppercase!important;letter-spacing:0!important;color:#ffffff!important;border-bottom:none!important}.legacy-mobile-header .et_mobile_menu li a:hover,.legacy-mobile-header .et_mobile_menu li.current-menu-item>a{color:#f50057!important;opacity:1!important}.legacy-mobile-header .et_mobile_menu,.legacy-mobile-header .mobile_nav,.legacy-mobile-header .et_pb_menu__wrap,.legacy-mobile-header .et_pb_menu_inner_container{border-top:none!important;border-bottom:none!important}}html{scroll-padding-top:120px;scroll-behavior:smooth}#home,#equipment,#projects,#why-choose-us,#process,#contact{scroll-margin-top:120px!important}@media (max-width:980px){html{scroll-padding-top:90px}#home,#equipment,#projects,#why-choose-us,#process,#contact{scroll-margin-top:90px!important}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}#home,#equipment,#projects,#why-choose-us,#process,#contact{scroll-margin-top:100px}@media (max-width:980px){.legacy-mobile-header .mobile_menu_bar::after{content:none!important;display:none!important}.legacy-mobile-header .mobile_menu_bar,.legacy-mobile-header .mobile_menu_bar::before{color:#ffffff!important}.legacy-mobile-header .mobile_nav,.legacy-mobile-header .mobile_nav a,.legacy-mobile-header .mobile_nav span{color:#ffffff!important}}@media (max-width:980px){.legacy-mobile-header .mobile_menu_bar::after{content:none!important;display:none!important}.legacy-mobile-header .mobile_menu_bar{color:#ffffff!important;opacity:1!important}.legacy-mobile-header .mobile_menu_bar::before{color:#ffffff!important;opacity:1!important}.legacy-mobile-header .mobile_menu_bar span{color:#ffffff!important;opacity:1!important}}@media (max-width:980px){.legacy-mobile-header .mobile_menu_bar{font-size:0!important;color:transparent!important;line-height:1!important}.legacy-mobile-header .mobile_menu_bar::before{content:none!important;display:none!important}.legacy-mobile-header .mobile_menu_bar::after{content:"MENU"!important;display:block!important;font-family:"IBM Plex Mono",monospace!important;font-size:14px!important;font-weight:600!important;letter-spacing:0.16em!important;line-height:1!important;color:#ffffff!important;opacity:1!important;visibility:visible!important}.legacy-mobile-header .mobile_nav.opened .mobile_menu_bar::after{content:"CLOSE"!important;color:#ffffff!important}}@media (max-width:980px){.legacy-mobile-header .et_pb_menu__menu{display:none!important}.legacy-mobile-header .et_mobile_nav_menu{display:flex!important}}@media (max-width:980px){.legacy-mobile-header .et_pb_menu__menu{display:none!important}.legacy-mobile-header .et_mobile_nav_menu{display:flex!important}}.et_pb_scroll_top.et-pb-icon{background:#F50057!important;color:#ffffff!important}.vibrant-services-section{padding-bottom:60px!important}@media (max-width:980px){.vibrant-services-section{padding-bottom:50px!important}}@media (max-width:767px){.vibrant-services-section{padding-bottom:40px!important}}