Change background colour of blog

[Joanna]

Hi there,

Is it possible to help me with changing the background colour for the blog page: http://www.varrojoanna.com/thoughts/

I have tried the below code but it did not work. I am not able to locate the class of the content wrapper.

/* THOUGHTS PAGE STYLING••• */

.page-content clearfix {
background:#fff !important;
padding: 50px !important;
border: 3px solid #f7f7f7;
}

Thank you,

Joanna

[Rui Guerreiro – SUPPORT]

Hi,

Try this one instead

.container {
   background:#fff !important;
   padding: 50px !important;
   border: 3px solid #f7f7f7;
}

-Rui

[Joanna]

Hi there,

No, this one don’t work. It makes whole container white (please see on screenshot) and I would like just the posts list container (excluding sidebar) to have white BG like I have on the single post pages http://www.varrojoanna.com/weekly-colours-inspiration-berries-green-pink-orange-yellow/

It also makes white the container on other pages and I would like to influence only the blog page.

Thanks,

Jo

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Your website is down as i checked many times.
Thanks
Mohammad

[Joanna]

Hi there,

Here all works fine. Please find attached the screenshot. What error you are receiving?

Jo

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Your initial code was almost correct, try this one.

.page-content.clearfix {
   background:#fff !important;
   padding: 50px !important;
   border: 3px solid #f7f7f7;
}

-Rui

[Joanna]

Hi there,

That worked but unfortunately it influenced all the pages (Please see on the screenshot). Is there a way to influence only the blog page?

Thank you

Joanna

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Replace last code with this code:-

/*Just change page id 2 with your blog page id*/
.page-id-2 .page-content.clearfix {
   background:#fff !important;
   padding: 50px !important;
   border: 3px solid #f7f7f7;
}

Thanks
Mohammad

[Joanna]

Hi there,

Super, that worked now.

Thank you,

Joanna

[Rui Guerreiro – SUPPORT]

I forgot about that specification. Thanks Mohammad.
-Rui

[Joanna]

Hi there,

I have tried to do the same thing with this page: http://www.varrojoanna.com/shop
I added exact same code with just different page id but it did not work.

/* SHOP PAGE BACKGROUND*/

.page-id-19 .page-content.clearfix {
background:#fff !important;
padding: 50px !important;
border: 3px solid #f7f7f7;
}

I also tried with the class: .col-sm-9.clearfix

Any idea what am I doing wrong, with this page?

Thank you,

Joanna

[Rui Guerreiro – SUPPORT]

Try the code below that is specific to the shop page.

.post-type-archive-product .page-content.clearfix{

   background:#fff !important;
   padding: 50px !important;
   border: 3px solid #f7f7f7;

}

-Rui

[Joanna]

Hi there,

Super, that worked out! Any idea why my products are flying around instead of being in some column grid? Attached on the screenshot.

Thanks,

Jo

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

it’s because of the padding and the border that you added.
You will have to reduce the width of the product elements.

You need add the code below.

@media only screen and (min-width: 1200px){
body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-one-sidebar ul.products li.product {
    width: 238px!important;
} 
}

body.woocommerce .has-one-sidebar ul.products li.product {
    width: 196px!important;
}

@media only screen and (max-width: 991px){
body.woocommerce .has-one-sidebar ul.products li.product {
    width: 140px!important;
}
}

-Rui

[Joanna]

Super, that worked out now. Thank you very much for your time!

Joanna