SOLVED Helium G5: Dynamic sizing of header background image
-
-
- Erich Markert
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
I have some header background images in a 3:2 ratio, width of 2000 pixels, that render nicely on a smartphone and smaller screens but not so much on desktop computers.
Is there a way to have the image sizes dynamically scaled based upon the device viewing the web page? What I'm looking to try and do is to have the images somewhat bigger on desktop browsers and left as is on smaller screens.
For instance, redeemernewpaltz.org/get-involved on my smartphone renders nicely, but the image height on a desktop browser is much shorter. - Last Edit: 4 years 10 months ago by Erich Markert.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I'm not quite sure what you are looking to do? The image always goes 100% width of the container. You can't make the image fit 100% width and 100% height without distorting the image. You could make the height of that header much taller - but I am sure you won't want that either. So exactly how do you want it to look? Perhaps you want to swap to a different image altogether? basiscally you have a 1704px x 254px space into which you are putting a 200px x 1333px image?
Please do a screenshot of your problem and annotate to make it clear.
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.
-
-
-
- Erich Markert
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
It's not that I want the width and height to be 100%. What I'd like is to have the image height to dynamically render taller when the browser window is above a certain size so as to display more of the image. I can fake it by adding a bunch of line breaks before and after the heading, but it then makes the render on mobile devices a bit weird.
I've attached two images. One is when the desktop browser window is maximized, and another that mimicks a mobile browser.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Use this code...
// 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) { #g-header { padding: 10rem 0; } } // 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) { }
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