Skip to main content ↑ ↓
Set different log ofor mobile version? Started by Genesis · · Read 6628 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Set different log ofor mobile version?

My logo was made for desktop users, but now its far too big on mobile and i was wondering if i could set a diffent logo for the mobile version of the site?

Even if it was smaller it would be hard to read on mobile anyways, so I'm kind of stuck.

Re: Set different log ofor mobile version?

Reply #1 –

You can resize the logo to fit the width of your screen or a percentage you decide.  Post a link to your forum 
sorry for my bad english

Re: Set different log ofor mobile version?

Reply #2 –

Quote from: Genesis – My logo was made for desktop users, but now its far too big on mobile and i was wondering if i could set a diffent logo for the mobile version of the site?

I think this is possible by loading your image from css in #logobox using ::before while displaying none for #logo.

Re: Set different log ofor mobile version?

Reply #3 –

Usually yes, it also depends how the logo was set to begin with (admin panel, replacing files, changing theme, etc.).
Bugs creator.
Features destroyer.
Template killer.

Re: Set different log ofor mobile version?

Reply #4 –

I thought mobile png is for favicon or something, but may be I was wrong.

Quote from: Genesis – Even if it was smaller it would be hard to read on mobile anyways, so I'm kind of stuck.
I think resize is not an option too.

I'd agree that the use of css will depend on how logo is set. My suggestion is based on default setup. It can be improvised.

Re: Set different log ofor mobile version?

Reply #6 –

You can (still) replace the logo with some css, "just" set a different logo in the appropriate media query, one that works for mobile.
Something like...
Code: [Select]
@media screen and (max-width: 33.750em) {
#logobox img { display:none;} /* removes the normal background */
#logobox:before { display:block; width: 100%; max-width: none; /* makes the logo as wide as possible */
height: 50px; /* the height that you prefer */
background-image:url(http://www.elkarte.net/community/themes/testing_theme_1-1/images/_light/logo_elk.png); /* the url to the image */
}
}
Bugs creator.
Features destroyer.
Template killer.
 

Re: Set different log ofor mobile version?

Reply #7 –

Thank you for your help! I'll try this. :)