Problem in Media Quarry

I have this img in my html and I want to shrink the image down when it hits 600px but its not working. Can someone help or explain to me how images scale down in Media Quarry
.left img{
width: 200px;
padding-top: 120px;
padding-bottom: 10px;
}


and this is my media
@media only screen and (max-width: 600px) {
.left img{
width: 100px;

}
.left img{
width: 200px;
padding-top: 120px;
padding-bottom: 10px;
}


and this is my media
@media only screen and (max-width: 600px) {
.left img{
width: 100px;

}
19 Replies
~MARSMAN~
~MARSMAN~•3y ago
You're kinda missing a closing } here.. check if you're not missing one in your code
sebin
sebinOP•3y ago
sebin
sebinOP•3y ago
closing is here I don't really know why its not scaling down
~MARSMAN~
~MARSMAN~•3y ago
Can you make a codepen please?
sebin
sebinOP•3y ago
Okay sure
sebin
sebinOP•3y ago
I just ffigured something. I just used max-width on my .left img and it works. Whats the diffference from using the normal width?
~MARSMAN~
~MARSMAN~•3y ago
In your HTML the img has no class .left you sure it has a class name? When i removed the class it's working well now.
sebin
sebinOP•3y ago
oh yes another one. Im targeting the outside class with my img thats why its not working on my media quarry Thanks alot!!!!
~MARSMAN~
~MARSMAN~•3y ago
Width will set the img, or whatever element it is, width to the value you set and it will stay like that no matter what screen size it is. max-width you use it to control the width of your element. For example: Say you have an element with a width of 90% of the screen, now it may look good on small and medium size screens but once you are on a big screens it may look.. not desirable. So you set the allowed max-width of this element to let's say 700px or any other unit, and once it reaches this number it will stop expanding and stay at that value. Hope it make sense 😅 Ok great! Always make sure to check your class names and see if there's any typos if you're facing any problems like this or in general.
sebin
sebinOP•3y ago
one more how do I fix this? its underline means its not working
sebin
sebinOP•3y ago
@therealmarsman
~MARSMAN~
~MARSMAN~•3y ago
I'm gonna need a codepen again 😬
sebin
sebinOP•3y ago
im its actually on my project web XD can I sent it via dm? dont roast me XD
~MARSMAN~
~MARSMAN~•3y ago
Send it here don't worry 😅
sebin
sebinOP•3y ago
Okay wait So basically on line 66 where my bc color is active. and when it hits the 820px I want to change it to other color which is line 27 on css also the buttons I want to change the color of them when it hits the 820px
~MARSMAN~
~MARSMAN~•3y ago
Media queries should be written at the bottom of your CSS file, cut all the media query styles and paste it at the bottom of the file https://codepen.io/ThatMartianDev/pen/MWGxRwa
sebin
sebinOP•3y ago
Is that so? I am not aware of it XD some of videos I've watched they put the mquaries affter a one section Im going to try it It work! Thanks a lot @therealmarsman Im a bit tired XD
~MARSMAN~
~MARSMAN~•3y ago
No problem! Lol
Want results from more Discord servers?
Add your server