media query or android to blame?

[tracybags]

Hi Everyone,
I am further along than earlier posts (thanks to some great help here). My problem is here:

http://codepen.io/anon/pen/QboNZb
or live here http://www.darlingmagazine.co.uk/INDEX3.html

The 4×1 of magazine covers responds to media query into 2×2 block – looks perfect on iphone, ipad – but on my android in portrait, it screws up this alignment. Move it back to landscape and it’s perfect again. I don’t know if this is an android peculiarity or my media queries not being right. The other blocks, footers, etc., are all working as they should.

In Firefox designer/responsive view I can make the error happen at around 400px then it corrects again when scaling down! This puzzles me greatly! Also makes me think it’s nothign to do with Android. Thank you everyone for your time.

[tracybags]

http://codepen.io/charlieapple/pen/YXgqRO

[Senff]

Adding clear:both; to #ColThree (for that media query) should fix it.

[tracybags]

Hi Senff – thank you sooo much – that worked!! BUT would you mind very much explaining to me WHY it worked because I don’t understand. I thought the ‘clear:both’ would mean that nothing can float to the right or left of the element. For Col3, when it splits into 2×2, it has Col4 to the right of it. So I didn’t think your solution would work but – never one to second guess you experts – I did it and it worked! But WHY? Have I misunderstood what ‘clear:both’ means? thank you for taking the time to help!! Much appreciated.

[Senff]

I thought the ‘clear:both’ would mean that nothing can float to the right or left of the element.

Not exactly. In this case, it’s basically a “reset”.

Normally, Col3 would be to the right of Col2 because Col2 has float:left;, basically saying “whatever comes next, don’t start it on a new line but put it next to me (if there’s enough room).“.

But, by giving Col3 a clear:both;, you say “stop floating everything, reset it, don’t go on the same line as the previous float“.

Hope that explains it!

[tracybags]

Thank you – it explains it, and I do understand your lovely explanation but I would NEVER have tried this because of my wrong understanding of what clear:both means – or maybe what it can mean!
Thank you so much for your time again.

[Author]

Posts