[blubbbiz]

Hi

can you please help me so i can place the responsive logo on 100% of the width? im not so good into css and i dont want do try hours till i find it 🙂

hopefully you can help me out, the link is https://www.leosfastfood.ch also it would be nice to have it bigger on the desktop version, where can i change this? there is space between the menus in my case.

thanks for help

[Althemist]

Hi blubbbiz,

I am afraid the logo can’t be made 100% wide. It’s the special header layout that prevents that. It can’t be increased neither on desktop, nor on mobile. The recommended size of the image is a rectangle or square with max dimensions 170x110px.

I’d suggest making your logo as bigger as possible inside a file with the above dimensions. In your specific case, I guess you’ll get best results if you make the logo two lines – e.g.:

 LEOS
fastfood

[blubbbiz]

lol you tell me i should change the logo of the customer because in your eyes its not possible to do it? which file is responsible for the mobile css? so i can try myself then as i cannot believe this. all other things are below and i dont see why it cannot be the whole width

[Althemist]

You can add mobile-specific CSS anywhere. Doesn’t need to be in a specific file. The best place to make customization changes would be in the style.css of the child theme.

What I am saying is that because of the specific header layout it’s risky to change the original flow, as it may lead to other unpredictable problems on other devices. I am not telling you to change the customer logo, just giving you options to fit in the logo layout and size restrictions.

If you need help with that, just let us know, but please note that it is highly not recommended to change the original layout. There are many elements in the header that might be affected in different usage scenarios.

Regards,
Dimitar

[blubbbiz]

yes i need to change it. on desktop its ok like this now but mobile i just dont get it “centered”

please help me to get it in the middle so i can move on to the other customisations

thank you very much

[Althemist]

@media only screen and (max-width: 768px) {
#header.lafka-has-header-top #logo {
width: 100%;
left: auto;
margin-left: -20px;
}
#header #logo img {
max-width: none;
max-height: none;
text-align: center;
margin: 0 auto;
}
}

Just keep in mind this would only work if NO mobile logo is assigned AND you’re doing it on your own responsibility, as it may really cause other issues on different devices.

Also, for the logo not centered problem, please note that your original image is not centered. There is an empty gap on the right side.

Hope this helps.

Regards,
Dimitar

[blubbbiz]

niiiiice that worked like a charm! thank you very much 🙂

[Author]

Posts