media query head scratcher

[Pavel]

please see

https://forallthetime.com/codetest/FAQ.html

at a break point of 768 px the top image over laps the bottom of the div

help me correct that, please

kindly pass on the proper code with coments so i can learn here 🙂

 

[Deleted member 2829]

I don't see a problem with that page on my Windows PC using Chrome. Is this on a specific device and/or browser ?
You also may want to explain a bit better, I'm not sure what you mean with the "top image" and how you need to resize to trigger the problem. A screenshot could be handy.

 

[OldMan]

I used firefox and it looks good.

Did you check what happens if the content of one div is three times longer than all the others?

 

[Antero360]

please see

https://forallthetime.com/codetest/FAQ.html

at a break point of 768 px the top image over laps the bottom of the div

help me correct that, please

kindly pass on the proper code with coments so i can learn here 🙂

Hi there,
I also took a look at it and just like @cbreemer and @OldMan mentioned, your design looks good. If you can provide a screenshot of where the actual issue is, that would be awesome 😀

 

[EkBass]

Works fine here too, with Chrome, Brave and Edge.

 

[Pavel]

ok, my first screen shot! took a little figuring out 🙂

FAQ breakpoint 768 px

both chrome and firefox displays this

you can better understand what i meant

 

[Deleted member 2829]

Yes now I see what's happening - although not why ! The image does not shift up as much for me as it does for you though.

At first glance I see nothing in your code that would cause it, but there's a lot going on with styling. What I do in such a case is make a copy and then carefully trim it down bit by bit until the problem disappears. It can be quite a lengthy process, and it's all too easy to take out too much and have to backtrack, but it usually works for me.