I have declared a class called #inner in CSS to apply to a certain div that has the property width: 50%;
but I would like the width property to be 100% when viewing it on a mobile devicewidth: 100%;
I have thought of doing it in the following way, but I have tried it on my smartphone and it does not work:
#inner {
width: 50%;
margin: 0 auto;
padding: 0 20px;
background: #ffffff;
border-radius: 10px;
padding: 40px;
}
@media screen and (max-width: 480px){
#inner{
width: 100%;
}
}
How could I make it work?
Make sure that you
HTML
have itmeta-viewport
, and a tip when altering the width to 100%, with the padding that you are giving the div it will generate horizontal scroll so withcalc
100% of the page you will subtract80px
what would be the sum of The40px
on each side of thediv
one you hit with thepadding
.What you did is not wrong but it is possible that the resolution of your smartphone is higher than the one you declared in the media query, therefore the
width: 100%
. The best option is to do what is known as mobile first , which means that it is first modeled in mobile and then the media query for tablet is added and finally desktop .Another thing you should know is that the classes are attributes
class
and are called from the css with a "dot", for example,.inner {}
and the id with the hashtag.