[Hans]

Hello

I need to change the background color of one specific page. On that page there is now one image and under the image there is a white space.And I do not get rid of it. I tried to change the background image. I found numerous solutions, but all fail. One of the solutions of which I think it must work is on the catch forum:
.page-id-1859 #main { background-color: #f7f7f7; }
Also this css did not make the trick.

Is there a solution for this problem?

Kind regards

Hans Hagmeijer

[Skandha]

@toerfiets: Hello Hans,
Can you please post the URL of the page where you want to change the background color?

Kind Regards,
Skandha

[Hans]

Hello Skandha,

I tried on hagmeijer.nl the css:
.site-header-main {
padding: 0;
}

(I found that, not your suggestion)

This worked fine in Google Chrome.
But in safari on the Mac the sub-items dissapear.
That is amongst others why I should like the different background color, because the gap between image and menu disappears.

Kind regards

Hans Hagmeijer

[Hans]

Hello Skandha,

The URL is: https://www.sinfore.nl/?page_id=1085

What I should like is that this page is equal full width as https://www.hagmeijer.nl/test-2/.

The yellow part on hagmeijer.nl is an image with 1920 x 1200 px.
On https://www.sinfore.nl/?page_id=1085 the image is 1920 x 1000. Today I will make this image 1920 x 1200.

Kind regards

Hans Hagmeijer

[Skandha]

@toerfiets: Hello Hans,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.page-id-1085 #page,.page-id-1085 .header-media .wrapper {
    max-width: unset;
    width: 100%;
}

Let me know if this works out!
Kind Regards,
Skandha

[Hans]

Hello Skandha,

This worked fine as far as it concerns the width.
If it should be possible to give the page-id 1085 another background color, then it is totally fine, because then there is a connection between the menu and the image. Now there is still a gap between the image and the menu.
I tried:.site-header-main {
padding: 0;
}
This worked well in Google Chrome but didn’t work in Safari.

Kind regards

Hans Hagmeijer.

[Hans]

Hello Skandha.

I spent hours to find a aolsution and maybe I did not describe the problem.

What I should like is the functionality of changing background colors as is it standard in the possibilities of the customizer, but then for just one page. Then I should be very glad.
Is that possible.

I tried many solutions from the supportforum, but every solution did not work.

Kind regards

Hans Hagmeijer

[Skandha]

@toerfiets: Hello Hans,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* To get rid of the gap between menu and the image */
.page-id-1085 #header-content {
    display: none;
}

Can you let me know for which section you would like to change the background color on this page?

Let me know if this works out!
Kind Regards,
Skandha

[Hans]

Hello Skandha,

This worked perfect. Thank you.

What I should like is the background color like in Customize -> colors -> page background color.
Then the whole page (content part also) gets the whisked color.
I should like -if it is possible- that the page section under the image gets the whisked background color.

Kind regards

Hans Hagmeijer

[Skandha]

@toerfiets: Hello Hans,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#content, #site-generator {
    background: #ffc90d;
}

Let me know if this works out!
Kind Regards,
Skandha

[Hans]

Hello Skandha,

Thank you. This worked fine.

Kind regards

Hans Hagmeijer

[Hans]

Hello Skandha,

There is still a problem. I noticed it when I looked the other pages. OM all the pages there occurs a little yellow band at the page bottom. see: https://1drv.ms/u/s!AlMivTDXp7Eso8t6Q0bmPuqcjjH5qQ?e=HG4230

I added: .page-id-1085 #content, #site-generator {
background: #ffc90d;
}
Because page 1085 is the only page with that color I added .page-id-1085 to the css you gave me.

I should be glad when the little band at the bottom can dissapear.

Kind regards

Hans Hagmeijer

[Hans]

Hello Skandha,

Did you already find a solution for this problem?

Kind regards

Hans Hagmeijer

[Skandha]

@toerfiets: Hello Hans,
Change the code I provided you above to

.page-id-1085 #content, .page-id-1085 #site-generator {
    background: #ffc90d;
}

Let me know if this works out!
Kind Regards,
Skandha

[Hans]

Hello Skandha,

Thios is working fine. Thank you.

Kind regards

Hans Hagmeijer

[Skandha]

@toerfiets: Glad it worked out. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts