How to Overlap Columns/Elements for Homepage Banner?

Hi,
Thanks for the login to your site, first I moved your two columns into a color section and gave it a custom ID homepage-banner then I gave your green box a custom class green-box the in the first column with the image in the Row Layout field I choose No Space Between Columns so the green box column would be right next to the image column.
Then I added this css to your Quick CSS to vertically center your green box column and overlay it on the image column:

#homepage-banner + #after_section_1.container_wrap {
	 border-top-style: none;
}
#homepage-banner main.content {
	 padding: 0;
}
#homepage-banner .entry-content-wrapper {
	display: flex;
    align-items: center;
}
#homepage-banner .green-box {
	left: -5vw;
    z-index: 1;
}

I also removed the padding from the special heading EQUIPPING CLASSES below the two columns because it seemed like too much.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this css:

.responsive #top #homepage-banner > .container {
	max-width: 100%;
	padding: 0;
}
#homepage-banner .av_two_third .avia-image-container-inner,
#homepage-banner .av_two_third .avia-image-container-inner img {
	width: 100%;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, I disabled the above css for now and to ensure that I am understanding correctly, when I look at the example page I see that the header image and overlay text box is not 100% of the page, but it is 100% of the content area, leaving a margin on both sides, note that the overlay box comes to the edge of the content area:

With the above css removed your header image is to the left edge of the page content area, but the overlay box doesn’t extend to the right edge of the content area, so we only need to make the overlay box bigger, correct?

If so I got pretty close by changing the coluoms to 4/5 & 2/5 and using this css:

#homepage-banner .green-box {
	left: -15vw;
    z-index: 1;
}
.responsive #top #homepage-banner > .container {
	max-width: 100%;
	padding: 0;
}

#homepage-banner .avia-image-container .avia-image-container-inner img {
	width: 100%;
	right: -5vw;
}

try clearing your browser cache and see if this is closer, and try fine tuning the css to suit.

Best regards,
Mike

Hi,
Glad to hear this helped, to remove this from the mobile view, try wrapping the code in a media query @media only screen and (min-width: 767px) { ... } like this:

@media only screen and (min-width: 767px) { 
#homepage-banner .green-box {
	left: -15vw;
    z-index: 1;
}
.responsive #top #homepage-banner > .container {
	max-width: 100%;
	padding: 0;
}

#homepage-banner .avia-image-container .avia-image-container-inner img {
	width: 100%;
	right: -5vw;
}
}

the (min-width: 767px) means it won’t work until at least 767px, you could change this to 1024px, 1440px or any other minimum screen size that you wish.

Best regards,
Mike