In Firefox on Android div runs out of the parent div

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
janvl
Power Poster
Power Poster
Posts: 947
Joined: Wed Aug 13, 2008 10:57 am

In Firefox on Android div runs out of the parent div

Post by 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
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1616
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: In Firefox on Android div runs out of the parent div

Post by 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.
Not getting the answer you need? CMSMS support options
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: In Firefox on Android div runs out of the parent div

Post by Dr.CSS »

janvl
Power Poster
Power Poster
Posts: 947
Joined: Wed Aug 13, 2008 10:57 am

Re: In Firefox on Android div runs out of the parent div

Post by 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
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1616
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: In Firefox on Android div runs out of the parent div

Post by 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:

Screenshot 2024-03-01 154802.png
I'd also suggest looking into flex and grid options for the layout, float is pretty dated.
Not getting the answer you need? CMSMS support options
janvl
Power Poster
Power Poster
Posts: 947
Joined: Wed Aug 13, 2008 10:57 am

Re: In Firefox on Android div runs out of the parent div

Post by 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
Power Poster
Power Poster
Posts: 947
Joined: Wed Aug 13, 2008 10:57 am

Re: In Firefox on Android div runs out of the parent div

Post by 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
Post Reply

Return to “Layout and Design (CSS & HTML)”