Menu
I am working on making a page responsive, by changing div width according to the size, but except width every property I am able to change, width is not changing at all.
My code for HTML and styling the elements
#main {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 100%;
}
@media screen and (max-width: 700px) {
#red {
display: none;
}
body {
background-color: yellow;
}
#blue {
width: 75%;
}<body>
<div id="main">
<div id="red" style="background-color: red;">RED COLOR</div>
<div id="blue" style="background-color: blue;">BLUE COLOR</div>
<div id="green" style="background-color: orange;">GREEN color</div>
</div>This is the code I tried, but except width every property I am able to change How do I change the width property?
533
Setting a particular "width-range" isn't any different from the way media queries are created. The only difference is the addition of more media feature expressions (that is, the screen width sizes). Take a look: @media only screen and (min-width: 360px) and (max-width: 768px) { // do something in this width range. }
Media process errors on Android can be triggered by a long list of factors. For example, maybe you're running low on RAM and storage space. Clear the cache, check for updates, remove the SD card and check if the error is gone. As a last resort, reset your device to factory settings.
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}
don't use inline styles (that's a bad practice), and this is all about specificity, so you can set just div (for width:100%) or specify your #blue even more, by adding a parent to it, in this case #main.
You can calculate specificity here
#main {
width: 100%;
display: flex;
flex-wrap: wrap;
}
div {
width: 100%;
}
#red {
background: red
}
#blue {
background: blue
}
#green {
background: green
}
@media screen and (max-width: 700px) {
#red {
display: none;
}
body {
background-color: yellow;
}
#blue {
width: 75%;
}
}<div id="main">
<div id="red">RED COLOR</div>
<div id="blue">BLUE COLOR</div>
<div id="green">GREEN color</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
