Different logo only for mobile / small screens

Hi,

I would like the use a 3rd logo that i will make only for mobile view on small screens.


This logo above is fine for ipad but on mobile its to big, so i need it only different on mobile view so it will look like this:

What type of logo are you using right now?

Image, so i upload two logo's and selected those in the template settings.

Those images you upload are for header and menu not for mobile. To be able to create different image for mobile you would need to use css logo and add different logo with use of media queries for small screens.

I changed template settings so i will get logo from css. The small logo now is the same on all devices only the size is being changed if am right.

#gkLogoSmall.cssLogo {
background: url("../images/logo-small.png") no-repeat scroll center center / contain rgba(0, 0, 0, 0);
height: 70px;
margin-top: 3px !important;
width: 112px;
}

What should i add to template override to get a different logo on mobiles only?
Something with @media (max-width: 480px) ?

Code: Select all

@media (max-width: 480px){
#gkLogoSmall.cssLogo {
background: url("../images/logo-small.png") no-repeat scroll center center / contain rgba(0, 0, 0, 0);
height: 70px;
margin-top: 3px !important;
width: 112px;
}
}


in override.css

I added the code above to override.css and anable CSS override in my advanced options.
Unfortunately the added code has no affect on the mobile view and the logo stays the same on small resolutions.
URL: http://install.diesaftpresse.de/

@DiE SAFTPRESSE - I don't see anything in your override.css file.

I added
@media (max-width: 480px){
#gkLogoSmall.cssLogo {
background: url('/"/images/logo-small.jpg"') no-repeat scroll center center / contain rgba(0, 0, 0, 0) !important;;
height: 27px;
margin-top: 9px !important;
width: 113px;
}
}
to override.css and enable it in the advanced options (screenshot). I wonder why the css-file has no effect on the mobile logo.

Still your override.css file is empty:
http://install.diesaftpresse.de/templat ... erride.css

I deleted the old override.css and replaced it with a new one. Now the code is visible in http://install.diesaftpresse.de/templat ... erride.css but the problem stays the same.

Any suggestions ?

@DiE SAFTPRESSE - seems like your case is different. Original override corresponds to original topic and question.
Could you please create screenshots and describe exactly what you would like to do? Right now I see you have 2 different logos (one in header and one during the scrolling).

Ok, I try to explain. On screens wider than 640px I want to use the regular logo ("Logo_navi_reg.jpg"). When I change the width smaller than 640px the logo should change to a second one ("logo-small.jpg). But it doesn't currently.
My override-code:

Code: Select all

@media (max-width: 640px){
#gkLogoSmall.cssLogo {
background: url("../images/logo-small.jpg") no-repeat scroll center center / contain rgba(0, 0, 0, 0);
height: 27px;
margin-top: 3px !important;
width: 113px;
}
}

You need to change image logo type to css logo type first.

I'm not sure if I understand what you mean. It should work exactly as it does in the SteakHouse-template.

Template settings- now you have image type, and you should start with css type - only this type of logo allows you to use override.css and define different images for different screen sizes.

I changed logo type to css. Now the images on frontend switches to the default (SteakHouse) ones.
Where can I replace them with my own ones ?

That is exactly the outcome that was expected. CSS logo is defined in css not in backend. You need to replace
templates/gk_steakhouse/images/logo-small.png
and
templates/gk_steakhouse/images/logo.png
with your own files.

I replaced the images with my own ones. But I deleted the css-path in backend by accident. When I click on "Auwählen" (select) I can't find templates/gk_steakhouse/images/logo-small.png

This fields are only important when you use image type logo.

When I switch to "From CSS" the logos disappear in the template. I replaced the default with my one ones before, that's why I thought I have to define a path.

Could you please change to css logo and let me know - I'll check the page then?

Ok, I changed to css logo now.

The logos are now visible. The only issue is that the small logo disappears when screen-width smaller than 640 px.

If I go to:
http://install.diesaftpresse.de/
it gives me
"Error displaying the error page: Application Instantiation Error: Could not connect to MySQL."
error

The correct URL is:
http://diesaftpresse.de/

I guess there is something wrong with logo file itself:
http://diesaftpresse.de/templates/gk_st ... -small.jpg

It was an error in the database. I replaced it and it works now. Thank you for support, Cyberek.

I'm glad you could find the issue.
Is there anything else I can help you with regarding this topic?