Hi @marton1960
Try the following at Appearance > Custom CSS:
/* Header */
#masthead {
background-size: 100%;
background-repeat: no-repeat;
}
At Appearance > Customize > General, change your header padding to compensate.
Please try changing our previous Custom CSS to:
#masthead {
background-size: 100% !important;
background-repeat: no-repeat;
}
The masthead ideally needs content to create space. You’re attempting to use the masthead background only without any contents so we’ll need to make some extra adjustments:
1. Remove the Headline Widget from Appearance > Widgets > Sidebar.
2. Add the following to Custom CSS:
@media (max-width: 780px) {
#masthead .hgroup {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (max-width: 480px) {
#masthead .hgroup {
padding-top: 30px;
padding-bottom: 30px;
}
}
Hi @marton1960
White Space
Regarding the extra white space. Please see the additional Custom CSS I provided. I also provided a quick explanation for why this is happening.
Sub Menu
Please go to Appearance > Theme Settings > Navigation > Mobile Menu Collapse and change that value to 480 OR 780. Your mobile menu isn’t currently activating because that setting is set to 0.
Hope that helps.
picture is good but the white space isn’t change
I’m still not seeing the padding CSS I sent in your Custom CSS. Is it there?
@media (max-width: 780px) {
#masthead .hgroup {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (max-width: 480px) {
#masthead .hgroup {
padding-top: 30px;
padding-bottom: 30px;
}
}
i put it back but didn’t do anything, that’s why i removed it before
Thanks. Please change to the following:
@media (max-width: 780px) {
#masthead .hgroup {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
}
@media (max-width: 480px) {
#masthead .hgroup {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
}
Thanks it is much better however on mobile and Os I still have a much smaller white space
Glad to hear we’re making progress. This is how we’ve setup our customisation:
From 0px to 480px in screen width the padding under (max-width: 480px) takes effect.
From 480 to 780 the padding under (max-width: 780px) takes effect.
For everything else the padding set at Appearance > Customize > Theme Design takes effect.
Try adjusting the padding figures in Custom CSS with this in mind. Hopefully you can crack the mobile issue.
