So, as far as I ca tell, my code ~should~ work. but it doesn't. Chrome's developer tools show me that my browser is recognising the >501px condition and applying the CSS, but not the smaller viewport condition. I thought maybe it was a wierd browser cache thing, but no... it happens to a simplified page made to demo the problem, and on Safari too.
So, after 2 days of web building, and having had so many more complex wins along the way, I'm stumped in this apparently simple-not-simple thing.
Could someone please put me out of my misery and tell me why this doesn't unfloat the div when the Browser gets thin?
an image showing the problem in using Chrome
<html>
<head>
<style>
#aboutblock {
width:90%;
margin: 5% auto;
text-align:justify;
}
@media all and (min-width: 501px) {
#aboutblock img {
float:left;
width:400px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
@media all and (max-width: 500px) {
#aboutblock img {
float:none;
width:277px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
</style>
</head>
</body>
<div class="blockcontainer">
<div id="aboutblock">
<img src="https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJvd2xfbmlnaHRfb3dsX2FuaW1hbC1pbWFnZS1reWJjeWVqaS5qcGc.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien odio, sollicitudin a dolor at, sodales etc etc etc...</p>
<p>Suspendisse potenti. Donec molestie aliquam lacus at laoreet. Donec justo risus, euismod quis augue a, etc etc etc...</p>
<p>Sed efficitur rhoncus tristique. Sed vulputate, velit quis auctor convallis, erat lacus tincidunt sem, etc etc etc... </p>
</div>
</div>
<body>
</html>
As to the 'how' and 'why' and 'what have I done?'... I was building a website, got overtired, and now I can't even find a way into solving this seemingly small thing, which is surely my cue to get some sleep finally. ... but also, I'm now far too flustered with it!
I made a small, cleaned up version of the relevant part of the website I was building to make sure the problem wasn't with some conflict or such. I was not.
Test case is here. https://generous-tiger.static.domains/testpage
Honestly, I'm hoping I'm missing something obvious here, just in the hope that someone can put me out of my misery with it!
As suggested in comments, it works as expected after adding viewport meta tag, including mobile device view:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#aboutblock {
width:90%;
margin: 5% auto;
text-align:justify;
}
@media all and (min-width: 501px) {
#aboutblock img {
float:left;
width:400px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
@media all and (max-width: 500px) {
#aboutblock img {
float:none;
width:277px;
margin:1%;
margin: 0% 3% 2% 0%;
}
}
</style>
</head>
</body>
<div class="blockcontainer">
<div id="aboutblock">
<img src="https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJvd2xfbmlnaHRfb3dsX2FuaW1hbC1pbWFnZS1reWJjeWVqaS5qcGc.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien odio, sollicitudin a dolor at, sodales etc etc etc...</p>
<p>Suspendisse potenti. Donec molestie aliquam lacus at laoreet. Donec justo risus, euismod quis augue a, etc etc etc...</p>
<p>Sed efficitur rhoncus tristique. Sed vulputate, velit quis auctor convallis, erat lacus tincidunt sem, etc etc etc... </p>
</div>
</div>
<body>
</html>