Switching 'Site nam'e Logo for phones
Permalink Browser Info Environment
Chris,
Is there a way to serve up an alternative (smaller) logo image when browsing on phones?
My current logo pushes the nav button for phones, onto the next line. which increases the nav header depth.
Cheers
Nigel
Is there a way to serve up an alternative (smaller) logo image when browsing on phones?
My current logo pushes the nav button for phones, onto the next line. which increases the nav header depth.
Cheers
Nigel
| Type: | Discussion |
|---|---|
| Status: | In Progress |
works great ..thanks!
You're welcome!
works great ..thanks!
I have a related problem with the Site Name--it wraps around on mobile phones and overlaps the photo. Looks okay when the phone is horizontal, but not when vertical. Any simple fix?
And related to that related problem: I moved the revolving text feature down the page on one site using some CSS you had given me for a different site (where I wanted to move the feature _up_) that uses a fixed number of pixels displacement. The one that's higher I can get away with on the mobile site, but the lower one pushes the feature way too far down the page. Is there a proportional measure I can use to position that feature so that it will render properly on the mobile devices?
Many thanks,
A
And related to that related problem: I moved the revolving text feature down the page on one site using some CSS you had given me for a different site (where I wanted to move the feature _up_) that uses a fixed number of pixels displacement. The one that's higher I can get away with on the mobile site, but the lower one pushes the feature way too far down the page. Is there a proportional measure I can use to position that feature so that it will render properly on the mobile devices?
Many thanks,
A
For Site Name you can try decreasing the font size by adding this in the Add your CSS box in the theme's customization panel:
Adjust accordingly. Or you can change it to an image and use the code I originally pasted above.
@media (max-width: 767px) { #nav .navbar-brand, #nav .navbar-brand h1 { font-size: 20px; } }
Adjust accordingly. Or you can change it to an image and use the code I originally pasted above.
20px looks great, thanks!
Related(?) issue: The main home picture looks great in the landscape phone view, scales beautifully, but gets about 40% of the right side cut off in the portrait view. Those are some wide pics; is there an easy fix for the portrait view? (NB - It doesn't matter to me if the pic shrinks to a pretty small size overall to get all that width into the relatively narrow portrait view.)
It's because the CSS for the #feature div is set to have the background image "cover" or fit-in the whole area. Take a look at this thread:
http://www.concrete5.org/marketplace/themes/treviso/support/jumbotr...
http://www.concrete5.org/marketplace/themes/treviso/support/jumbotr...
Hey, Chris. New wrinkle.
I have a family of three sites (three dealerships, one company) that are using the Treviso theme. The first two were handled with the CSS above reducing the text size to 20px. On the third I was asked to add a gif of a rotating windmill as their logo, then the company name. To make the height of everything work I set the text of the company name to 46px in the Site Name stack, but now the CSS patch you gave above is not working on this site. I tried adding !important to the text size with no change.
I'm wondering if there's a way to just suppress the gif altogether on the mobile site (because the alternative would be to shrink it to a size that won't look good). (I'm not sure it looks good now, but the client loves it.) Is that an easy fix or a big problem?
Many thanks,
Andrew
I have a family of three sites (three dealerships, one company) that are using the Treviso theme. The first two were handled with the CSS above reducing the text size to 20px. On the third I was asked to add a gif of a rotating windmill as their logo, then the company name. To make the height of everything work I set the text of the company name to 46px in the Site Name stack, but now the CSS patch you gave above is not working on this site. I tried adding !important to the text size with no change.
I'm wondering if there's a way to just suppress the gif altogether on the mobile site (because the alternative would be to shrink it to a size that won't look good). (I'm not sure it looks good now, but the client loves it.) Is that an easy fix or a big problem?
Many thanks,
Andrew
Yeah if you add a unique ID to the gif image you can then "display:none" it when on mobile.
Regarding the other issue can you post a link to the page so I can take a look and see what you mean?
Site where moving the feature up works more or less on mobile phone view: reliablehomesofsealy.com
Site where moving the feature down doesn't work so hot on mobile phone view: huntsvillereliablehomes.com
Site where moving the feature down doesn't work so hot on mobile phone view: huntsvillereliablehomes.com
Just apply some different CSS that moves it up/down if you're on a mobile phone. You can target it like in the code above using
@media (max-width: 767px) { }
This will put a max-width on the logo when in phone view. Change the 200px to whatever works for you.