If you have used a full width slider or background video in/for the front page 1 section of Altitude Pro you might have noticed the the backgrounds for other image sections either load incorrectly or partially in Google Chrome.
The main reason for this buggy behavior seems to be a combination of z-index and relative position for the front page sections in style.css. Here is the StudioPress forum discussion about this.
Below are the changes you can do in Altitude Pro’s style.css if you are using a background video and/or slider and find that background image for one or more sections is not loading properly.
Note: I do not see the point of negative top margin, a huge top border, padding-box background-clip and relative position for front page sections 2 to 7. Also negative top margins for .bottom-image and .bottom-image img are un-needed. The proper way to get rid of space below an image (when it’s present) is to set its vertical-align to top in my opinion, not use negative margins.
At the bottom of this post you can find a link to download fully modified style.css which includes all the below changes.
1) Change
| .front-page-2, | |
| .front-page-3, | |
| .front-page-4, | |
| .front-page-5, | |
| .front-page-6, | |
| .front-page-7 { | |
| border-top: 54px solid transparent; | |
| margin-top: -54px; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| position: relative; | |
| z-index: 9; | |
| } |
to
| .front-page-2, | |
| .front-page-3, | |
| .front-page-4, | |
| .front-page-5, | |
| .front-page-6, | |
| .front-page-7 { | |
| /*border-top: 54px solid transparent; | |
| margin-top: -54px; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| position: relative;*/ | |
| z-index: 9; | |
| } |
2) Change
| .bottom-image { | |
| margin-bottom: -120px; | |
| margin-top: 100px; | |
| } | |
| .bottom-image img { | |
| margin-bottom: -10px; | |
| } |
to
| .bottom-image { | |
| /*margin-bottom: -120px;*/ | |
| margin-top: 100px; | |
| } | |
| .bottom-image img { | |
| /*margin-bottom: -10px;*/ | |
| vertical-align: top; | |
| } |
3) Add this above the media queries:
| .front-page-2 .flexible-widgets { | |
| padding-bottom: 0; | |
| } | |
| .front-page-2 .flexible-widgets .widget { | |
| margin-bottom: 0; | |
| } |
4) In the 1023px media query add
| .front-page-2 .flexible-widgets.widget-full .widget { | |
| margin-bottom: 0; | |
| } |
near the end.
5) In 800px media query change
| .bottom-image { | |
| margin-top: 60px; | |
| margin-bottom: -80px; | |
| } |
to
| .front-page-2 .solid-section .flexible-widgets { | |
| padding-bottom: 0; | |
| } | |
| .bottom-image { | |
| margin-top: 60px; | |
| /*margin-bottom: -80px;*/ | |
| } |
If you do not wish to apply the above changes manually or wish to compare your above edits with the fully modified Altitude Pro’s stylesheet, here it is:
Thanks Sridhar for this tutorial. I was experiencing this very same issue with a current project running on my localhost. I’ve applied your css codes as per the tutorial above, however, I’m finding that now front-page-6, a solid section, is not filling the entire screen view and part of the image of front-page-7 is showing up in that view too.
Wondering if I either A) missed a step along the way applying your code, or B) this is normal behavior now? It doesn’t look right, as it’s supposed to fill the entire screen view. Do you have any suggestions? Thanks.
The code to make the sections take up viewport height is present only for image sections in this theme, not for solid sections.
I don’t find this problem in my test site. Can you make your site live and provide the URL?
I took your code out and it appears that solid section still does the same with original child theme code.
[RESOLVED]
Follow Up: I went ahead and changed Altitude Pro’s back to the original css code. What I did instead was comment out /*margin-top: -54px;*/ as copied and pasted below from stylesheet. This seem to have fixed the negative padding that was making those solid sections short and not full screen view. Additionally, this also appears to have fixed the bug issue with the images not displaying. Now the images show up as they’re supposed to. Like I said, this is all I did to the original stylesheet. Just wanted to update ya on it. Thanks.
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
border-top: 54px solid transparent;
/*margin-top: -54px;*/ /*This line is shortens the height of solid sections & next image section begins to overlap on it. By commenting this line out, it solves this issue*/
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative;
z-index: 9;
}
PS. Since we’re on this theme’s css subject. My images do not appear to be responsive. Even for Front-page-1 same issue. Any ideas?
Before or after the changes in this tutorial? I checked both and don’t find this issue. Can you give the URL where the problem can be seen?
I went ahead and checked this as well after removing your code and back to the original css and same thing, images are not responsive. Anyway, thank you for the response.
I often use negative top margins to overlay an entry header on its featured image in an archive page, for example, but when I saw that negative margin combined with a transparent border of the same height, that did seem weird to me. Weird and a little hacky.
If I wind up using that theme for anything, I’ll be on the lookout for that styling – and substitute a version of yours – just because.
MB
Thanks for this. Just wanted to say I was seeing a white bar along the top of my page with the word ‘top’ in it. It was happening at any view size. No idea what it was doing there but adding you css changes removed it. Thanks!
I am wondering – will this fix the issue i am having in webkit browsers where when you scroll, and the header changes to the .dark class, it keeps the same height as before scrolling, instead of narrowing the header area to fit just the nav bar?