Background color change and resizing of Header section

Hi there,

Background color is included in the Colors add-on in the premium plugin:
https://docs.generatepress.com/article/colors-overview/

Or you can try CSS like this to change the body background:

body {
    background-color: #000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

The header padding is also included in the Spacing add-on in the premium plugin:
https://docs.generatepress.com/article/header-padding/

Or you can use this CSS:

.inside-header {
    padding: 60px;
}

The shop page is all from WooCommerce and not really related to GeneratePress, however it just looks like your image files are too small:

Let me know if this helps ??

Just a note that the free version has the body background color option built in: Customize > Colors ??

Hi,
I have tried using simple css plugin, used the Customize > Colors option also, but background color remains white. Only the gap between containers have changed colors. OR should I have asked how to change the containers colors?
Please check-https://cooldealspot.com/
Thanks

Ah yes, the option to change the container background colors is in our premium version.

For CSS, you can use this:

.separate-containers .inside-article, 
.separate-containers .comments-area, 
.separate-containers .page-header, 
.one-container .container, 
.separate-containers .paging-navigation, 
.inside-page-header {
    background-color: #ffffff;
}

Hi,
Thanks very much. It worked. Another advice. Similarly, How to change Header and Footer, Sidebar container colors, please.
Thanks

Header:

.site-header {
    background-color: #ffffff;
}

Footer widgets:

.footer-widgets {
    background-color: #ffffff;
}

Copyright bar:

.site-info {
    color: #ffffff;
    background-color: #222222;
}

Sidebar widgets:

.sidebar .widget {
    background-color: #ffffff;
}

Hope this helps ??

Thanks

You’re welcome ??