Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sixteen Nine inconsistency in column heights
- This topic has 24 replies, 2 voices, and was last updated 10 years ago by matt klein.
-
AuthorPosts
-
April 15, 2014 at 6:25 pm #100612matt kleinMember
I have a few pages on my site that have short content. When this happens the content section does not reach the bottom of the page and you can see the background under it. Also, the footer does not extend to the bottom of the page, so you have a three-level page as shown here. http://karate-kids.com.au/mosman-location/
I have tried using this solution at http://www.alphablossom.com/create-equal-full-height-columns-genesis-framework-css/
http://karate-kids.com.au/mosman-location/
but it seems to have no effect. Am I missing something? Any help would be greatly appreciated.April 15, 2014 at 9:43 pm #100624Tony @ AlphaBlossomMemberHi Matt,
I wrote the article above...I tried this on your site and it seems to work ok. It's slightly different than the example because it has the header as one of the columns, so you have to tweek it a little.
You'll have to add "position: relative;" to .site-container (around line 382 of your theme's style.css file):
.site-container { max-width: 1280px; position: relative; }
Then for your header:
.site-header:before { background-color: #FF0000; bottom: 0; content: ""; display: block; left: 0; position: absolute; top: 0; width: 239px; z-index: -1; border-right: 1px solid; }
and your main content:
.content:before { background: none repeat scroll 0 0 #FFFFFF; bottom: 0; content: ""; display: block; left: 240px; position: absolute; top: 0; width: 760px; z-index: -2; }
Both the header (left red column) and main content (middle white) extend the full height of the page.
You'll have to consider the responsive view, either using @media query with min width, or using something like ".site-header:before { display: none; } when the layout changes. If you have a hard time with that just post back here and I'll be happy to take a look.
Have a great night!
Tony Eppright
AlphaBlossom
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 16, 2014 at 12:05 am #100629matt kleinMemberThanks so much for your assistance Tony. Do you make the above changes in addition to the ones listed in your post or instead of?
April 16, 2014 at 12:30 am #100634Tony @ AlphaBlossomMemberHi Matt,
It's my pleasure. Use these instead as the site structure is different than most of the Genesis themes. So just add the 'position: relative;' to your existing .site-container and add the other two entire code snippets and you should be good to go.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 16, 2014 at 12:32 am #100635matt kleinMemberI just added the changes you suggested below the .content and .site-header areas, not in place of. I'll be darned, it worked! Still checking for mobile responsiveness. Thanks again.
April 16, 2014 at 12:36 am #100639Tony @ AlphaBlossomMemberGreat job! Yea, the last two with the :before in them are additional so you did it right. The first one already exists, so you just have to add the one line (position: relative).
Let me know if you need help sorting out the responsive part.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 16, 2014 at 1:55 pm #100745matt kleinMemberHi again Tony, the website appears correctly in almost all the browsers except Safari, which seems to ignore our latest changes. I did refresh the cache just to make sure. Also, in smaller windows on desktop it breaks down and when I ran it through the test at http://www.studiopress.com/responsive/ it does not look right, with the border running through the middle of it.
I actually tried to get help from support but they said this is a customization issue so they cannot help. They said the theme was not designed to accommodate all the menu items I have on the left, and so was designed to remain fixed. Not sure what the solution is but beginning to think I chose the wrong theme. I really like it though and am hesitant to change. I also really like how it looks now with the full columns.
Is one solution to go back to the fixed menu but use the subpages?
April 16, 2014 at 3:26 pm #100802Tony @ AlphaBlossomMemberHi Matt,
Which safari? I checked it on my desktop safari v 5.1.7 and all columns are full height.
For responsive, your layout changes @ 1279px...so you'll have to adjust for that.
Inside the existing media query for 1279px and below, you can add:
@media only screen and (max-width: 1279px) { .site-header:before { display: none; } .content:before { left: 0; width: 70%; } }
Then for 1023px and below:
@media only screen and (max-width: 1023px) { .content:before { display: none; } }
Of course, don't repeat the @media only parts, just add the code inside to your existing media query.
You could also use min-width media queries (which I would probably do) but I don't want to complicate things too much 🙂
Try it out and let me know how it goes!
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 16, 2014 at 6:37 pm #100861matt kleinMemberHi Tony, you have been a huge help for me, much appreciated. As you can see, I am in DEEP waters. I will try the media query next. I am on Safari v7.03. I remember when I built my first wordpress theme four years ago it was very hard to get Safari to play nicely. Please go to this page to verify issues. http://karate-kids.com.au/epping-heights-location/. I still see the same three mismatched levels for the columns on my desktop (iMac).
April 16, 2014 at 6:56 pm #100863Tony @ AlphaBlossomMemberI've checked safari on 2 computers and looks fine, but ver 5.1.7 on pc (still in the dark ages of pc 🙂 )
I posted on twitter to see if others could check on mac...i'll post back to let you know what i find out.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 16, 2014 at 8:05 pm #100868Tony @ AlphaBlossomMemberWell, I got some help and saw a screenshot of the issue, seems only on mac safari 7.
Not sure how much you want to try, but I have a few thoughts...unfortunately I can't test without a mac readily available.
First thing I would try is to add "z-index: 1;" to .site-container, and remove z-index from .site-header. That just tests the header, if it works we can work on the content next.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 16, 2014 at 10:05 pm #100891matt kleinMemberThanks for all you have done Tony, I'll follow you on Twitter. Will try your recommendation, but it looks good on all other browsers. Safari is becoming the pain that IE used to be.
I noticed that on my laptop I had to extend the window out its maximum to get the "desktop" version. Otherwise, it defaults to the "iPad" version, which is not ideal since the header monopolizes two-thirds of the crucial area above the fold. Is there any way to force it to show the "desktop" version at a smaller window size?
April 16, 2014 at 10:33 pm #100894matt kleinMemberI just checked browser statistics at http://www.w3schools.com/browsers/browsers_stats.asp. Noticed Safari only accounts for 4% of users, and I suspect that out of those the vast majority come from mobile or ipad devices. Since the problem is really not an issue on those, is it really worth the trouble to make sure it appears perfectly? I am ready to mark this issue as resolved.
April 17, 2014 at 11:45 am #101000Tony @ AlphaBlossomMemberHey Matt,
You're quite welcome...I'm sorry about the issue with Safari 7. It's tough for me to troubleshoot until I have access to a computer and can try to figure it out.
It's up to you to decide browser support, and since this is cosmetic may not be worth spending more time for one browser. These things really bug me though, so when I get a chance I'll try to find a solution and if I do I'll let you know.
You can always use jquery to do the trick if you want to fix the Safari 7 issue:
You can use the css media queries to change where the layouts change. You currently have a few, such as this:
@media only screen and (max-width: 1023px) { // your code here }
You can change the max-width to a lower number...basically it's applying these style UP TO 1023px max, but not over. You can also add more queries if you want to have finer control.
You'll have to look closely though. Changing the number might break the layout, so you'll have to keep an eye out and adjust as needed.
I hope this makes sense...
Thanks,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 17, 2014 at 6:47 pm #101078matt kleinMemberThanks Tony, I ran this through Browsershots yesterday and some worrying issues came up. In many of the shots, including some late version Firefox, the content has been pushed down below the level of the footer. Any reason for this? I read somewhere about a problem with anchor text causing it. Any ideas?
April 17, 2014 at 6:59 pm #101080Tony @ AlphaBlossomMemberHey Matt,
I took a look and it looks like you haven't added the responsive code I listed above
So when the browser goes below 1279px, and then again at 1023px and 767px, the layout changes so you have to adjust the code to match.
The anchor text issue is if you're using another method to accomplish this, where the bottom padding is a very large number offset by the same (but negative) very large margin.
If you add the styles above to your responsive section, media queries, it will fix the issue you're seeing.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 17, 2014 at 9:47 pm #101095matt kleinMemberSorry Tony, I am very unclear as to what changes to make at each browser width. I thought I did this already. Here is my current css for media queries:
/*
Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1279px) {.full-width-content .content,
.site-header,
.site-inner {
width: 100%;
}.content {
width: 70%;
}
.content:before {
left: 0;
width: 70%;
}
.sidebar-primary {
width: 30%;
}.site-header {
float: none;
height: auto;
padding-top: 20px;
position: relative;
}
.site-header:before {
display: none;
}
.title-area {
margin-bottom: 20px;
}.genesis-nav-menu {
border-bottom: 1px solid #333;
margin: 0 0 20px;
text-align: center;
}.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}.genesis-nav-menu li {
border: none;
float: none;
width: auto;
}.genesis-nav-menu .sub-menu {
margin: 0;
}.genesis-nav-menu .sub-menu a {
text-align: left;
}.site-footer {
display: none;
}.sidebar {
padding: 60px 60px 0;
}}
@media only screen and (max-width: 1023px) {.site-container {
margin: 0 auto;
max-width: 768px;
}.sixteen-nine-landing .site-container {
margin: 5%;
}.content,
.sidebar-primary {
width: 100%;
}
.content:before {
display: none;
}
.archive-description,
.author-box,
.breadcrumb {
margin: 0 0 60px;
}.search-form {
float: none;
margin: 0 auto;
width: 50%;
}.sidebar {
padding: 60px 0 0;
}}
@media only screen and (max-width: 767px) {.site-title {
font-size: 24px;
}.title-area {
margin-bottom: 0;
}.header-widget-area .widget,
.site-description {
margin-bottom: 20px;
}.site-header .widget-area {
text-align: center;
}.content,
.sidebar {
padding-left: 10%;
padding-right: 10%;
}
.content:before {
display: none;
}
.entry-title {
font-size: 32px;
}.enews-widget input,
.enews-widget input[type="submit"],
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.search-form,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}.responsive-menu {
display: none;
}#responsive-menu-icon {
display: block;
}}
April 17, 2014 at 11:57 pm #101102Tony @ AlphaBlossomMemberHi Matt,
I looked again and everything looks correct. Maybe my browser cache was showing the old styles so I didn't see the changes...sorry about that.
Can you tell me what you mean by "the content has been pushed down below the level of the footer."?
It's possible that you're seeing the sidebar, which in responsive mode sits below the main content...it has a transparent background, so you'll see the content with the white background, then the sidebar underneath appears as text sitting on no background (except the main background image). If that's what you mean you can add a white background to the sidebar and it will look like a continuation of the main content.
Please clarify (a screenshot would be great).
I was testing on Safari 7 and I was able to get the columns to extend all the way down...but the battery died so I couldn't quite pinpoint the fix 🙁
No guarantees on this, but I will try again tomorrow and see if I can resolve this issue with Safari v 7.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 18, 2014 at 2:47 am #101105matt kleinMemberThanks Tony, how do I provide screenshot. No place to upload here.
April 18, 2014 at 9:50 am #101179Tony @ AlphaBlossomMemberThis reply has been marked as private. -
AuthorPosts
- The topic ‘Sixteen Nine inconsistency in column heights’ is closed to new replies.