Archived topic
Completion of content background color (e.g. white) from header to footer
7 replies · Started by Walter Schwarz on May 22, 2022
How can I get this using css in the child theme of gp?
Please have a look at the following file to see what I mean:
https://www.wsy.at/comparison.pdf
This is valid for short content not reaching till footer.
The green area I created via:
body {
font-family: "Ubuntu", sans-serif;
font-size: 1.00rem;
margin: 0px;
padding: 0px;
background-color: #8FBC8B !important; /* new 22.05.2022 */
}
Thank you,
Walter
Hi Walter,
Can you link us to your site?
Hi Ying,
please take this as an example:
https://wertanalyse.de/wertanalyse-infos/
My wish is to get rid of the green line above and the green area below the short "text-Page".
Thank you for your support,
Walter
Hi there,
you have this CSS in your master.css:
.site-navigation, .main-navigation {
margin-bottom: 8px;
z-index: 100;
}
remove the margin-bottom: 8px; property to get rid of the green gap above the content.
To fill the space below add this CSS:
#page {
min-height: calc(100vh - 93px);
}
It will make the main page the height of then viewport ( 100vh ) minus the combined height of the top bar + navigation + footer bar ( 93px ).
I have to experience it again and again: besides the fact that GP runs great, you are the best supporters in terms of response time, quality of problem solving and friendliness. I don't know of any hotline that acts in such a helpful and appreciative manner. You get 11 out of 10 stars from me!
And I have one more question:
Is there a modification that the side faces stay green without "!important" on
"background-color: #8FBC8B !important; /* new 22.05.2022 */"?
Thank you very much,
Walter
It seems you are having this CSS in your child theme CSS file:
https://www.screencast.com/t/PIw4impBIW
If you remove thebackground-color: white; CSS, then the !important in your other CSS is not needed.
Thank you - works perfect!
You are welcome :)