Hello Florian,
You can adjust the padding size for smaller devices which will solve the issue.
There are existing media queries located in the style.css file towards the bottom.
Add the following CSS selector:
.hero {padding-top:100px;padding-bottom:100px;}
You can adjust the padding size to what you want.
-
This reply was modified 4 years, 5 months ago by
themely.
Thank you for your quick reply!
I am afraid that I will need a bit more support, as I am not a professional.
Rather novice-level understanding.
Where exactly is .hero {padding-top:100px;padding-bottom:100px;} supposed to be added at the bottom of the CSS file?
Section /* Responsive or /* Browser Specific Media Queries
Is this the only addition that is to be made?
I need the solution rather fool-proof.
Thank you for your understanding! 🙂
Hello Florian,
No problem.
Add it on line 1667 just below @media (max-width: 767px) {
Thank you!
We are getting there!
I have found @media (max-width: 767px) { online in line 1849 in style.css
Then I have added .hero {padding-top:100px;padding-bottom:100px;} and is has an effect on mobile, while leaving desktop untouched. So far so good.
Best result was actually .hero {padding-top:0px;padding-bottom:0px;}, however, parts of the welcome image get still cut of.
Is there any more room for improvement?
You can try adjusting the background size.
.hero {background-size: 100% auto !important;}
Try that.
Do you mean placing .hero {background-size: 100% auto !important;} below .hero {padding-top:100px;padding-bottom:100px;} ?
(I did that without effect to the mobile site.)
Any idea what might be wrong?
Place it together like this,
.hero {
background-size: 100% !important;
padding-top:100px;
padding-bottom:100px;
}
-
This reply was modified 4 years, 5 months ago by themely.
I have tried placing it together, however, changing the value of “background-size” had no effect. Padding hat the previous effect, but not sufficiently.
Any more angle we can try?
Hello,
Ok, in that case place the following code at the very bottom of the style.css file (right after Custom CSS.
@media (max-width: 767px) {
.hero {
background-size: 100% !important;
padding-top: 30px;
padding-bottom: 30px;
}
}
You are the man!
That worked!
Thanks a lot!
