SOLVED Mobile Logo Problem
-
-
- manuelkuhs
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
I have a very wide logo which is NOT resized in the mobile view by Gantry (Voxel theme).
Is it possible either to
(a) resize the logo for mobile view, or
(b) specify a different logo for the mobile view only?
Joomla 2.5.7
Gantry 4.0.4
Thanks in advance for any help.
Regards,
Manuel
-
-
-
- manuelkuhs
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
OK I found a workaround but I can't fully implement it myself.
I insert a command to load a different logo in the relevant css (iphone, android, mobile).
The problem is, the Gantry custom logo has a "!important" mark so it overrides anything I put into the mobile css.
Can someone tell me how I can delete the "!important" from the Gantry custom logo? I can't find where to do this.
Alternatively, Gantry automatically resizing the logo for mobile would be much better of course!
-
-
-
- beamaria
- Elite Rocketeer
- Posts: 513
- Thanks: 6
-
Same problem here, my logo is 900px x 65px and ideally should be the website title, but of course it's not possible to resize it for iphone-android-mobile displaying
Working with Joomla 2.5.7 and gantry FW and default template 4.0.5- The logo image is in top-a position (layout forced to 1 position in my case)
Any idea on how to solve this problem?
THANKS!!!
-
-
-
- Jamie Winegard
- Newbie
- Posts: 19
- Thanks: 0
- Entrepreneur
- Same problem.. using graffito.. need to know how to get the logo on mobile to resize and center. Please help asap. Where is the css rule that needs to be changed and what does it need to be changed to? Thank you!
-
-
-
- PremchandJaladi
- Newbie
- Posts: 1
- Thanks: 1
-
Had the same problem where my logo was going over the top of my menu on smaller sizes using gantry.
Eventually fixed it by adding in media queries to a custom css sheet specifying a new image and size with the !important attribute. The thing about the !important attribute is that the more selector specific it is, the more precedence it has. So to override the !important tag try chucking in more selectors.
My below code didn't work until I added the extra .logo-block class.
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.logo-block #rt-logo {
background: url("/images/logosmall.png") no-repeat scroll 50% 0 transparent !important;
height: 100px !important;
width: 330px !important;
}
}
Hopefully this answers the question! -
The following users have thanked you: Muntiu Ioana
-
Time to create page: 0.078 seconds