Community Forums › Forums › Archived Forums › Design Tips and Tricks › 100% Height for .site-inner
- This topic has 4 replies, 2 voices, and was last updated 9 years, 8 months ago by flyingorange.
-
AuthorPosts
-
August 7, 2014 at 9:25 am #117585flyingorangeMember
I may need fresh eyes because I've looked at this a variety of times and have not been able to achieve what I want. Hoping another set of eyes can help.
Site for reference: http://jacobs.fowdwebs.com/our-story/
As you can see, the inner content has a dark transparent background. I want to extend that background all the way to the bottom, no matter the height of the content of the page. Obviously responsive because of various screen sizes.
The dark transparent background is set as follows:
.full-width-content .content { width: 100%; background: rgb(0, 0, 0) transparent; background: rgba(0, 0, 0, 0.6); }
If memory serves correctly, I need to set not only the parent container height, but the body & html set a height of 100%.
I've tried a variety of methods and combinations and just cannot get it to do what I want.Thoughts? Help? Please ๐
August 7, 2014 at 12:34 pm #117608David ChuParticipantHi,
If I follow you, those basic CSS tricks won't work. I'll try pointing you in the right direction. You may find that these changes will cause other CSS edits that you'll need to do.Your site is simply doing what you're telling it to do - you have max-width set for .site-inner in a couple places in your media queries. They could be removed. As I said, this may lead to more nips and tucks elsewhere.
You also have padding-top set for .site-container at various sizes, and you'll need to change that at various media sizes, otherwise, "light stuff" appears at the top.
Good luck,
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
August 7, 2014 at 1:14 pm #117624flyingorangeMemberHi Dave!
Ignoring the @media-queries because I haven't set those at their final settings yet....
I'm trying to get the desktop setting for the background to be the height and that is where I am not getting it to set at this point. Here's a link to show a screenshot of what I mean. This screenshot from my desktop is 1920x1080 which the media queries won't kick in to cover at this point.
August 8, 2014 at 7:57 am #117750David ChuParticipantAh, that reminds me of my designer friend who is always surprised when she sees her design on devices that are not her enormous designer-y monitor. ๐
Since your content is shorter than your screen area, you'd need to artificially make its height be the same (or larger) than the screen. Probably some jQuery programming could be used for that.
Since you're simply filling in every bit of space, I don't see why you're not simply making the background itself incorporate that shadowy bit. That's the easy way.
Good luck, Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
August 8, 2014 at 7:02 pm #117852flyingorangeMemberSometimes it just the simplest solution instead of making it too complicated. Thanks for the input!
Now to go get all the media queries in line. Thank you!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.