Change product/collection background colour (VENTURE THEME)

[siksoxzuk]

Hi,

I'm trying to change my product collection/grid background to white in Venture theme. I changed the product pages background to white by adding:

.template-collection .page-container {
    background-color: #fff;
}

into theme.scss.css

What code do I need to add/change to change the background colour of my product grids? The overall content background for my theme is Black. 

[oscprofessional]

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

[siksoxzuk]

Hi,

it is not live yet, I can share a preview link?

[siksoxzuk]

preview link:

https://tmm53ku485h9qcvw-27271168083.shopifypreview.com 

[oscprofessional]

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.product-card {
    background-color: white;
    border-color: white;
}

[siksoxzuk]

Thank you! that worked. 

Do you have the code that will also change the product description and price font black? and the page heading font? So they can be seen on the white background. 

[oscprofessional]

Add this css

.product-card__name {
    color: black;
}
.product-card__availability {
    color: black;
}
.product-card__info {
    background-color: white;
}

[siksoxzuk]

Thank you!

Lastly, the page title font is white so it can't be seen now that the page background is also white.

How can I change the page title font on the product pages only, to be black? 

[oscprofessional]

Add this css

.template-collection h1.section-header__title {
    color: black;
}

[siksoxzuk]

What CSS would I need to add to centrally align the header on the product pages? I added some CSS which centrally aligned all the headers, but after adding the last CSS you suggested, the product headers have moved to the left. 

This it the current CSS:

[oscprofessional · Accepted solution]

Add this css

@media only screen and (min-width: 750px){
header.grid.medium-up--grid--table.section-header.small--text-center {
margin: 0;
}
.grid__item.medium-up--one-half.section-header__item {
width: 100%;
float: right;
}
}

[siksoxzuk]

That CSS has positioned the header to the left whereas I want it in the centre:

[siksoxzuk]

Hi - please can you help me on my last question? I need to centrally align the page header.

This is the current CSS for header text:

}
h1.small--text-center {
text-align: center !important;
}
.product-card__name {
color: black;
}
.product-card__availability {
color: black;
}
.product-card__info {
background-color: white;
}
.template-collection h1.section-header__title {
color: black;
}
@media only screen and (min-width: 750px){
header.grid.medium-up--grid--table.section-header.small--text-center {
margin: 0;
}
.grid__item.medium-up--one-half.section-header__item {
width: 100%;
float: right;
}
}