Archived topic
Small white line between header-banner and first block only on Iphone/Safari
7 replies · Started by jacob on June 22, 2021
page looks great except on Iphone Safari where there is a thin white line under the header that I would like to remove. I have a custom color for the page background (background-color: #285870;) I tried to add this to custom CSS for header and that didn't help... Any ideas, solutions?
Thank You!
Hi Jacob,
First you'll need to activate the colors module.
https://www.screencast.com/t/n51CqBBo
Then go to customizer > colors > Content, set background color to #285870 or transparent.
Let me know how it works :)
Thank you. I tried that but unfortunately it did not work... It looks fine on my laptop in Safari, but not on my Iphone (the thin white line is still there).
I think the white line is from the image itself.
If I set the image to transparent, then the white line is gone.
I downloaded the image (banner-6-scaled) and zoomed all the way in and the white line is not on the image... Is it possible it has to do with the scaling?
I'm not sure what you mean by making the image transparent?
I have 2 snippits of custom CSS that might be affecting it??? It doesn't show on the preview for mobile or tablet, and you don't see it on desktop. I ONLY see it on Safari on my Iphone...
header .inside-header{
padding: 0px;
}
and:
.inside-header.grid-container {
max-width: 100%;
}
or possibly the negative padding set for the video and player???
figure.pfl-video-size {
margin-top: -35px;
}
The CSS would not affect it.
Can you try to remove the logo and see if the line is still there?
Or you can try corp off a little bit the bottom of the image to test.
Let me know :)
I'm not sure what worked, but something did! After my last session, even after refreshing nothing had changed. I logged in today and everything seems to be fixed?!?!
THANK YOU!
Hum.. that's weird.
Anyway, I'm glad it's fixed now :)
