I've been attempting to hide a div on mobile devices using a media query, but unfortunately, it's not working as expected. When I resize the window smaller than (min-width: 1224px), the content disappears instead of being hidden.
Here is a snippet of the CSS code:
/* Styles for Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
.container {
display: none;
}
}
/* Styles for iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
.container {
display: flex;
height: 100%;
width: 100%;
}
...
And here is a snippet of the HTML code:
<div class="container">
<div class="logo-container">
<img src="assets/images/micarna.svg"/>
</div>
<div class="sign-in-container">
<div class="sign-in-form">
<div class="ui attached message">
...
</form>
</div>
</div>
</div>
If you can shed some light on why the document goes blank when the window size is less than (min-width: 1224px), your insight would be greatly appreciated. Thank you!