In Firefox on Android div runs out of the parent div

[janvl]

Hi,

i have made the skeleton for a new design with w3css for some small websites.
You can see it on
https://intensivfahrschule-pkw.de
The design is responsive and working well for the desktop in firefox.
On Android the news-items look perfect with chrome, with firefox the div with the news-item gets out of the parent div.

Does anyone have an idea what the cause could be and how to solve this?
I would be grateful for any hint.

Regards
Jan

[DIGI3]

There's a number of unclosed p and div elements, I'd clean those up first. Some browsers are more finicky about that than others. There's also two items with the ID of toggle-menu which will likely cause other issues.

[Dr.CSS]

https://validator.w3.org/nu/?doc=https% ... -pkw.de%2F

[janvl]

Thanks DIGI3 and Dr.CSS

Shame on me, i should have checked with the validator myself.
I cleaned up almost all but i still have that problem with the newsitems in firefox on android.
All chrome-based browsers look perfect in android, even firefox on the desktop (linux and windows) looks good just on android the problem exists.

Is there a firefox-forum on this, the forum i found is not for problems like this.

Maybe i will try ChatGPT.

Regards,
Jan

[DIGI3]

I think having the fixed width on the NewsSummary boxes is part of it, you could try changing that to a max-width. I can actually see the issue starting to creep in on other browsers and devices, it seems more width-related than browser. It also really breaks on desktop browsers with a narrow width. Some of that is because there are long urls in the content that aren't breaking, so it's causing horizontal scrolling.

Screenshot shows desktop Chrome at ~360px wide, very top shows the long url causing overflow, bottom shows the box breaking out:

I'd also suggest looking into flex and grid options for the layout, float is pretty dated.

[janvl]

Thank you very much DIGI3.

That long Link is part of the standard CMSMS text, I will remove it.

I will look into flex and grid and check with W3CSS, they have demos with the layout i want.

Kind regards,
Jan

[janvl]

Hi,

i took one of the templates from W3CSS and copied the css classes. It is working now also for firefox on android.
I need to tamper a bit to make it look better but you made clear to me that i should better avoid "float" and fixed width,
thanks for pointing in the right direction. Specifically that i use the validator . . .

I need to redesign the menu as well, more w3css, then the double ID will be solved.

Regards,
Jan