Header/Margin Color Change on Product Page

Store Design
1

Trying to get just the top portion of the product page to have a background color. So far I’ve been able to get the entire product area and my breadcrumbs area to have a background color, but there’s still a white portion of the page showing and I don’t know how to change its color. Here’s an example of the white background color showing through:

White_area.jpg
White_area.jpg816×412 22.8 KB

If I change the .main-content to have the background color I want, the white space changes correctly but it also changes the rest of the page and I only want the off-grey color at the top of the product page.

Here’s the URL to the product page. I just want the grey color at the top of the product page, above the fullscreen image.

I’m using the Venture theme if that impacts anything.

If anyone can help that’d be great!

2

@KavisoTaylor

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-product .main-content {
    background: #f1f3f2;
}
3

@KetanKumar

Thanks for the reply! Not sure if you saw it in the original post, but when I change the color of .main-content it “fixes” the issue, but also changes the color of the entire page which I don’t want to do. Just trying to get the header to go grey.

In the image below of the full product listing, you can see what I mean. The area labeled ‘stay white’ turns grey if I add the .main-content code.

Exampleq.jpg
Exampleq.jpg987×1201 104 KB

Hopefully, that makes sense!