Community Forums › Forums › Archived Forums › General Discussion › How to make Main Image's Height 'Responsive'
- This topic has 3 replies, 2 voices, and was last updated 9 years ago by betholson.
-
AuthorPosts
-
April 14, 2015 at 11:01 am #147892betholsonMember
Hey all, really hoping to get some help on this- my head hurts (from banging it against the wall trying to figure this out).
TRYING TO DO:
• Make the main image (couple with stag graphic) fit the width of the browser as browser is resized.
• Never have the image take up 100% of the height (need users to see there is more content below the image)
• Have the elements below the main image flow normally underneath it at all browser sizes. (right now, if the browser gets to a ratio where the whole background image fits inside the 'viewport', then there is massive white space between the bottom of the image and the other elements lower on the page.My initial thought is to try to figure out how to make that "viewport" responsive so that it will resize it's height as the browser is resized. ('viewport' seems to be div id="front-page-1" class=front-page-1") I just can't figure out what code to use to make it play nice with the other elements below it.
NOTE: The first problem I encountered was that background image covering the entire front page's height so I added some code to try to at least make the image short enough to show a little of the welcome text below it. I think this is causing the problem with the extra white space in smaller browers, I just don't know how to accomplish it any other way.
/* changes height of main image window- viewport */ .front-page-1 { height: 800px; }
Help is deeply, overwhelmingly appreciated and if you need any additional information please let me know!
http://junelion.com/April 14, 2015 at 12:06 pm #147914PorterParticipantThis is kind of a long shot guess, but you could try doing a % for the height. I believe if you're forcing a % height, the width will simply adjust in ratio. If you're setting a height of 800px, that's not always going to work. As for the other issues, not sure how to go about it. Try:
/* changes height of main image window- viewport */ .front-page-1 { height: 60%; }
April 14, 2015 at 12:24 pm #147916betholsonMemberHey Porter!
Thanks for taking a moment to share your idea! Unfortunately, that was like the first thing I tried and I discovered that Height can't be designated in percentages. Because... I don't know, that would make my life too easy? 😉April 14, 2015 at 3:08 pm #147922betholsonMemberHere's the clunky way I've managed to KIND OF create a patch for this. If anyone has more feedback about a better, more reasonable or the PROPER way to do this, I'm all ears!
I used Media Queries to change the height of the viewport for various ranges of browser widths. I dragged the browser to a width where the text was dropping down too far and then created a range to change the height of the viewport so that it would include most of the image. When I got to a spot where it was cutting off too much of the image I put that in as the other end of the range so the code I added looks like this:
` /* MEDIA QUERIES */
@media screen
and (min-width: 1800px)
and (max-width: 2200px)
{
.front-page-1 {
position: relative;
height: 800px;
width: 100%
}
/* moves nav further right */
.nav-primary .genesis-nav-menu {
position: absolute;
right: 50px;
}}
@media screen
and (min-width: 1300px)
and (max-width: 1800px)
{
.front-page-1 {
position: relative;
height: 700px;
width: 100%
}
}
@media screen
and (min-width: 800px)
and (max-width: 1300px)
{
.front-page-1 {
position: relative;
height: 500px;
width: 100%
}}
@media screen
and (min-width: 480px)
and (max-width: 800px)
{
.front-page-1 {
position: relative;
height: 350px;
width: 100%
}}
@media screen and (max-width: 480px) {
/* changes height of main image window- viewport */
.front-page-1 {
position: relative;
height: 200px;
width: 100%
}}`
Again, it feels pretty clunky and very much #ThereIFixedIt but it solves the problem for now and since the site has already gone live we needed something that would at least alleviate the problem some. Hope this helps anyone else out there who ever comes across this kind of issue.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.