CSS that works as intended in Firefox but not in Chrome?

[ArthurSmid]

I added media queries and styles while using Firefox, and it displays as intended but that same code doesn't work in a Chrome browser. The issue appears in the responsive transition to tablet and mobile on the A to Z page: https://little-help-book.netlify.app/table-of-contents-style-homepage/providers.html

Wondering how to troubleshoot this with the dev tools because so far, checking the styles, I haven't found the specific styles that need to be harmonized across browsers.

[stevepiercy]

displays as intended but that same code doesn't work in a Chrome browser

Please include screenshots and a sufficient description of what you mean between "intended" and "doesn't work".

Regardless, try opening the URL in Incognito. Sometimes plugins can interfere.

I see for the "L" providers that the URLs blow out the column.

<div class="provider-website">
  <a target="_blank" href="https://lanecounty.org/government/county_departments/district_attorney_s_office">https://lanecounty.org/government/county_departments/district_attorney_s_office</a>
</div>

You'll need to manage that content to wrap within the column space so that it doesn't get blown out. HTH.

[arigoldx]

Yah, happy to help but I don't quite grok what

The issue appears in the responsive transition to tablet and mobile on the A to Z page

means.

Gifs are also super helpful -- we use kap for that & it works wonders :)

[ArthurSmid]

Thanks for looking at this, here are the screenshots:

The A-to-Z page in a Chrome browser:

The A-to-Z page in a Firefox browser:

And this link is to the page itself, hosted on Netlify so you can view it and try it out if you like, without downloading the repo: https://little-help-book.netlify.app/table-of-contents-style-homepage/providers.html

[arigoldx]

Ah yes, the design breaks at a narrow enough width:

'bit tied up in work & kiddos+school and a new puppy (😅) but I'll :eyes: more if/when I have a moment.

[stevepiercy]

The horizontal scroll bar also disappears at narrow widths. Add overflow-wrap: break-word; to this style to fix one issue.

.provider-website {
    padding-top: .5rem;
    padding-bottom: 1rem;
    overflow-wrap: break-word;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

For links that open in a _blank target, always use rel="noopener noreferrer" in the <a> attributes to prevent potentially hijacking the browser. See https://stackoverflow.com/questions/50709625/link-with-target-blank-and-rel-noopener-noreferrer-still-vulnerable.

Nonetheless the display issue persists with this fix, so I'm at a loss. Sorry.

[frankylee]

To add to what @stevepiercy said above, it does appear to be an issue with very long URLs. Setting a word-break: break-all will force a break when the characters reach the max-limit, whereas break-word waits for a whitespace character. Hopefully this helps!

.provider-website {
    padding-top: .5rem;
    padding-bottom: 1rem;
    word-break: break-all;
}

[ArthurSmid]

Thank you, Steve and Franky, for recommending a fix for extra-long url's. After adding the word-break, now those website addresses wrap.

The issue with the page display in Chrome is a work-in-progress. Any idea—your help with this is needed. Thanks for taking a crack at this challenge!

[stevepiercy]

A troubleshooting technique that works well for me is through Developer Tools. Resize the browser above the breakpoint, select an element, and grab all of its Computed CSS. Resize the browser below the breakpoint, and repeat. Do a diff, find what is significant. It may require iteration over various elements, and it may be an element that you did not expect. I find that recording results is super helpful, allowing me to go back to earlier iterations in case I missed something.

[ArthurSmid]

Going into it to try Steve's troubleshooting technique and I saw, wow, that addition of the word-break: break-all; fixed the Chrome display overflow issue.

.provider-website { padding-top: .5rem; padding-bottom: 1rem; word-break: break-all; }

Thanks to you all for helping with this!

[stevepiercy]

The navigation bar still drops from horizontal across the top to vertical down the right margin when resizing from large to small. Is that intended?