Media Queries - Responsive Logo

Hi,

I found another thread about making the logo responsive. I made a media query for a smaller version of the logo and it works.

Only thing I just want to ask: Can I make media queries for another image?

I have my original logo.png and a media query for logo_mobile.png. Then I made another image, logo_small.png and put a second media query into the override.

Now I can see logo_small.png but I cant see the smallest image if I make the window smaller.

Did I made it wrong or isnt it possible to make media queries with different images? (big - middle - small) I hope you understand what I mean and it wasnt confusing for you...

Here's the website

Hi,

I found another thread about making the logo responsive. I made a media query for a smaller version of the logo and it works.

Only thing I just want to ask: Can I make media queries for another image?

I have my original logo.png and a media query for logo_mobile.png. Then I made another image, logo_small.png and put a second media query into the override.

Now I can see logo_small.png but I cant see the smallest image if I make the window smaller.

Did I made it wrong or isnt it possible to make media queries with different images? (big - middle - small) I hope you understand what I mean and it wasnt confusing for you...

Here's the website

EDIT: Here's the css D:

Code: Select all

@media (max-width: 1100px) {

#gkLogo.cssLogo {
   background: transparent url("../images/logo_mobile.png") no-repeat scroll 0 0;
   height: 100px;
   width: 300px;}
}
@media (max-width: 1200px) {

#gkLogo.cssLogo {
   margin: 24px 30px 0 0 !important;
   background: transparent url("../images/logo_small.png") no-repeat scroll 0 0;
   width: 622px;
   height: 100px;
}
}

Please dont wondering about the pixel sizes... I made it because of the width of the red main menu... And I'm not very good at making media queries...

I'm so sorry for making trouble

I totally changed the logo on the top. Now it's easier for me to make only one media query for a smaller image.

But can you tell me, if its possible to make media queries for more than one image? I had the feeling, the css ignored the images, if you have more than one ._.

Hi

If You are using css logo style than it can be simply overwritten as You did it vai override.css file. I'm not sure why haven't it worked. I'm guessing either override.css was not activated or had a wrong syntax (or codding setting - not a common issue, but it happens). Or You've been using image style, so css has not been used at all.