Responsive Logo with css

In use a logo type from css.
But this logo is not responsive. So I can only use a very small logo
for mobile/smartphone. If I use a bigger logo, or more space at
the css, the logo is to long for mobile version.
Have any a solution for my problem?

Media queries and override.css:

Code: Select all

@media (max-width: 320px){
{
#gkLogo {width: 100px;}
}
}
@media (max-width: 640px){
{
#gkLogo {width: 200px;}
}
}


Above code sets different width for devices with screen width up to 320px and up to 640px (from 321 to 640). This way you can control any element.

Remember to enable "CSS override" in template settings - advanced section.

I write the code (copy) at the oeride.css, and enable "CSS override" in template settings - advanced section.
But, there is no function.

My code was just a sample - could you please post an url to your site?

The url is http://www.lauenburger-online-zeitung.de/
The logo at the "Logo-Position" is again the old (small) version for Smartphone.

Responsive imege doesn't work well with css logo type. Use image logo type instead.

When I used the image logo, I have the same problem.
I have changed the "width" at the template.css under #gkLogo to 400px
With Smartphone, I have a overflow on the right side.
What I need, ist a logo (min. 400px) on PC, and a small logo for smartphone
without overflow.

I could shortly make available on request the above setting again if this helps in solving problems

1. Please change the logo type to image.
2. Please create mockups of page header on desktop/tablet/mobile so I know how to set up css'es.

The image is logo type.
What do you need? Scrennshots from desktop/table/mobil?
On Desktop and tablet thw logo is ok, but only on mobile, I have an overflow,
I think, the logo position is not responsive.

Please edit: /templates/gk_News/css/override.css and add at its end:

Code: Select all

#gkLogo {
height: auto;
margin-right: 10px;
max-width: 471px;
width: 75%;
}


Remember to enable "CSS override" in template settings - advanced section.

Thanks for your help!
Now everything works.

If you will have any other questions, feel free to post new forum threads.