ResolvedResponsive Logo
- This topic has 6 replies, 2 voices, and was last updated 2 years, 11 months ago by
blubbbiz.
- AuthorPosts
- October 7, 2020 at 10:06 am #26244
blubbbiz
ParticipantHi
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
October 7, 2020 at 12:53 pm #26250Althemist
KeymasterHi 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
October 7, 2020 at 1:07 pm #26251blubbbiz
Participantlol 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
October 9, 2020 at 8:54 am #26283Althemist
KeymasterYou 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,
DimitarOctober 9, 2020 at 10:35 am #26295blubbbiz
Participantyes 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
October 9, 2020 at 2:13 pm #26309Althemist
Keymaster@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,
DimitarOctober 9, 2020 at 8:18 pm #26317blubbbiz
Participantniiiiice that worked like a charm! thank you very much 🙂
- AuthorPosts
You must be logged in and have valid license to reply to this topic.