I’m having some issues with a thin line showing up over some of the images on the page I’m working on. The affected images are inside the .divider div. The structure is as follows:
.divider → div with set height to serve as divider between sections
.top-border → position absolute to fill the top 15% of the divider, with a background .svg wave shaped graphic. Serves as a top frame for the image
.btm-border → same as top border, but for the bottom.
.divider-img → position absolute to fill the whole divider with a background image.
I suspect the top and bottom borders are causing the issue, but I have not been able to figure out how to fix it. The line does not always show up, but by resizing the browser window I’m usually able to reproduce the error. Please see the attached screenshots from Safari on mac and iPhone. I have also been able to reproduce the issue on chrome and firefox for desktop.
Unfortunately, I haven’t been able to fix the issue. Being mainly an annoyance, I haven’t had the possibility to dedicate much time to it. I’ll be sure to post back here if I ever find a solution.
@treeactionseattle - If you inspect the users public page in dev tools you can see they resolved the issue. In their case the image above the clock section is positioned absolutely with top set at -1%. Sometimes a negative margin is called for. Depends on your design.
Since each site and designers approach is potentially different it is usually best to create your own topic and to provide the read-only and published link there as well.
