Media query not kicking in for all elements

HTML & CSS
1

I have a logo on my main page. use this code to resize at a smaller screen size.

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
 	#mainBody{
	background:#ff0000;
	}
	
  #logo img{
	padding-left: 20px;
	margin-top: -110px;
  width:50%;
  height:50%;
	}
}

the bdoy color chnage goes into effect the image resize doesn’t I also tried

  #logo{
padding-left: 20px;
margin-top: -110px;
width:50%;
 height:50%;
	}

how could I kick this change in please?
thx
D

2

What’s your HTML? Is the ID on the image itself or its container?

3

the id is on the div itself, but that is why I also tried

#logo>img{style:whatever;}
and #log img{style:whatever;}

either way it didn’t work. but the body styling does.
thx
d

4

We really need to see the full code to know what’s going wrong. Check out this page (posts 2 and 9) for a guide on how to post your code with images included:

5

I understand i just thought this would be an easy one. will see about putting the code up tomorrow at the latest.
Thank you ralph

6

you know…will have the page up by tomorrow.
I got it to work but, I remain a bit confused.

#logo img{
padding-left:5px;
margin-top: -5px;
[COLOR="#FF0000"]width:50%px;
height:50%px;[/COLOR]
}

i have changed the sizes of divs just using the

%
. I guess you have to use
%px
for images?
thx
D

7

No, that’s just invalid CSS, which will just mean that those styles are ignored.

8

Hello Ralph, gm.
I would have thought so as well. but it worked.
http://thebigmeow.us/
the logo does get smaller if I add the px at the end of the %.
pretty sure I am am not imagining it.

9

style.css (line 31) says:


img {
    height: auto;
    max-width: 100%;
}

The images are resizing because their container is being resized and they are resizing to fit their container.

Your invalid styles are simply being ignored, thereby allowing the above code to take effect.

10

As Ron says, those invalid styles are being ignored. On a side note, you still haven’t taken our many tips to optimize your background images. Each site you show us has large background images that are far too slow to load. You really need to deal with that, as it’s a terrible thing to do to users—especially on mobile. It’s really easy to save the images for the web in Photoshop.