Kevin Powell - Community•2y ago

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~•2y ago

You're kinda missing a closing } here.. check if you're not missing one in your code

sebin•2y ago

sebin•2y ago

closing is here I don't really know why its not scaling down

~MARSMAN~•2y ago

Can you make a codepen please?

sebin•2y ago

Okay sure

sebin•2y ago

https://codepen.io/pen?template=BaxbbNm

CodePen

...

sebin•2y 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~•2y 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•2y 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~•2y 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•2y ago

one more how do I fix this? its underline means its not working

sebin•2y ago

@therealmarsman

~MARSMAN~•2y ago

I'm gonna need a codepen again 😬

sebin•2y ago

im its actually on my project web XD can I sent it via dm? dont roast me XD

~MARSMAN~•2y ago

Send it here don't worry 😅

sebin•2y 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~•2y 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•2y 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~•2y ago

No problem! Lol

Gaming

Programming

Problem in Media Quarry