SOLVED Logo too big on mobile
-
-
- Mindstore Media
- Rocketeer
- Posts: 50
- Thanks: 0
-
I need to reduce the sice of the logo when shown on mobile. How do I do this?
It looks fine on large screen and tablet, but needs to be smaller on mobile phones.
How is this edited?
Best regards. Brian
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
You can change it with custom CSS.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Mindstore Media
- Rocketeer
- Posts: 50
- Thanks: 0
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Use this code...
.g-logo img, .g-footer-logo img { max-width: 100px; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Learn to use either, Firebug in Firefox, or Chrome Developer Tools in Chrome, they will save you hours on things like this and they're very easy to use.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
Hi,
As I have a similar problem and as this topic is still open, I'm adding this comment: I have included the CSS script provided by MrT in the custom.scss and recompiled, but it did not reduce the logo size in either a 5'' Android or a 4.5'' Win 8.1 device.
The specific problem that I have, is that I have included a language switcher module (only 2 flags, arranged vertically to save horizontal space) to the right of the logo in the navigation location, followed by several small spacer particles - to facilitate a more granular wrap around of the particles with mobile devices - and the social particle at the end. However, on mobile devices (and this is reflected also on a gradually narrowed-down desktop window), the logo invariably takes up the whole width of the screeen (vertical or orizontal) - even when I have set the logo width to only 10% in the layout! The result is that on a mobile device the logo is (up to a setting of about 20%) bigger than on the desktop screen and does not allow the very narrow language switcher to be displayed to the right of it on the same row...
Any suggested workarounds would be welcome...
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Carl - it's better to raise a new topic of your own rather than post in a dormant topic otherwise we might miss your post altogether. You can always cross-reference to another post if you think it useful (by adding link).
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Regards, Mark. -
The following users have thanked you: Carl L.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
Hello Mark,
I'm back on it now... you have already had a look at the site for another ticket, but here are the credentials again:
testsite-1.ccc77.org
login:
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Use this code...
.g-logo img { max-width: 175px; }
If you want you can also limit it differently by viewport size by using the above CSS in media queries (see below) with a different value.
// Gantry 5 custom CSS file // import breakpoints @import "dependencies"; // Typical values are the default breakpoints set in Gantry 5 // but these values are user definable in style settings // so that is why the code below uses mixins to get the actual // values from Gantry 5 template. // commonly used media queries // typically min 75rem @include breakpoint(large-desktop-range) { } // typically range 60rem to 74.938rem @include breakpoint(desktop-range) { } // typically 48rem to 59.938rem @include breakpoint(tablet-range) { } // typically 30rem to 47.938rem @include breakpoint(large-mobile-range) { } // typically max 30rem @include breakpoint(small-mobile-range) { } // Less commonly used media queries // typically min 60rem @include breakpoint(desktop-only) { } // typically min 48rem @include breakpoint(no-mobile) { } // typically max 47.938 rem @include breakpoint(mobile-only) { } // typically max 59.938rem @include breakpoint(no-desktop) { } // Mobile Menu Breakpoint @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { } @import "nucleus/mixins/breakpoints";
I'd suggest that you probably only need to use the first five of the above media queries.
Media queries work like this:
if the viewport size is xxxxx then
use this css
endif
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.061 seconds