Baffling blue line

Can anyone tell me what’s causing the horizontal blue line between my first and second sections? It only appears on my cell phone, not on my computer, and not in the Webflow designer.


https://preview.webflow.com/preview/chriss-fresh-project-1f6b30?utm_medium=preview_link&utm_source=designer&utm_content=chriss-fresh-project-1f6b30&preview=e9c346733b0b85394330dbf182dee6f9&workflow=preview

Hey @Chris_Patchel ,

can you provide a screenshot showing the blue line.

Can’t seem to see it in the preview link provided?

Cheers
Keiran

Screenshots of the portrait and landscape cellphone views:


Hmmm…

So this is strange? I can’t see the blue line you refer to when viewing in preview mode testing with Safari or Chrome-based browser?

I still haven’t solved this glitch. I only know that the blue lines correspond to the edges (top or bottom) of each section and/or the div block within each section. And it they don’t appear until I click on a section and then scroll up or down to reveal the edge/line.

Hi Chris,

I can replicate the issue (and it affects all viewport widths).
It is related to a CSS property that has been set (somehow) relating to ‘Box Outline’ for each section when in a focus state.

Just trying to locate the setting within the designer, but can’t find it. I have been able to test by inspecting the element using browser tools and can remove the setting to test successfully, but still can’t locate it within webflow designer.

Will keep you posted.
Keiran

Edit: Just revisited your site and it looks like you’ve resolved it by placing your Grid Div’s outside of your sections.
Well done :grinning:

Thanks Keiran. Do keep me posted. Although I solved that problem, I’m now trying to get the ‘current state’ navbar type style back the way it was : /

Hi Chris,

I noticed that the element ‘Section 3’ did not have the ‘Outline’ issue. So as a workaround you could delete the class name ‘Section 2’ and then duplicate the ‘Section 3’ name and rename it ‘Section 2’.

Apply the new ‘Section 2’ name to the original ‘section’ that was causing the issue, and then place the ‘Grid Div’ back into the relative sections.

Sorry I wasn’t able to dig deeper to see why the issue presented itself in the 1st place. Sometimes it can take longer to find the cause than to get a workaround in place so as not to hold up your project.

As a side note, regarding naming conventions for your CSS styles on your ‘Sections’.
Rather than name each one separately (and then have

to style them separately), use the same name for all your sections (that way you have a base and consistent styling for all Sections). If you need different styling for a specific section then you can achieve that by using a combo class. Additionally, having the same class name for the same element removes the risk of having inconsistent errors, and getting into a ‘Styling Rabit Hole’.

Anyway, hope that helps.

Keiran

Delete Class Names - Style Manager,

Thanks very much for that suggestion, Keiran. The first few attempts failed but it now seems to be fixed (fingers crossed).

Thanks again. Much appreciated.

1 Like