Maximising browser affects text alignment

[grantSenior]

Hello, I have a problem that I have not been able to find any solution to anywhere, if somebody could help me out here I’d be truly grateful.

On this page, I have 3 links (scope, strategy, execute) scrolling to sections lower on the page. For each section there are 3 lines of white text in alignment with some arrow graphics. Everything is fine until the browser is maximised and fills the screen resulting in displacement of the white text and the main black heading within the circle graphic by about 10 pixels.

I can not figure out why this is happening, and am truly stumped. Here’s a link to the test site and page in question. http://surefireresearchtestsite.businesscatalyst.com/ourApproach.html

My HTML

<div class="bgImageOverTop">

    <div class="wrapperTwo">

    <div  class="ourApproach ">   

        <div class="feedsBox " id="scopeControl">

        <h3 id="scope">Scope</h3>
        <div class="scopeFeedsBox">
            <ul>
            <li>Your Business</li>
            <li>Your Marketing Goals</li>
            <li>The Competitive Market</li>                 
            </ul>                                   
        </div>              
        </div>

        <div class="feedsBox" id="strategyControl">
        <!-- similar thing happening here -->               
        </div>


        <div class="feedsBox" id="executeControl">                  
        <!-- similar thing happening here -->               
        </div>

    </div>
    </div>
</div>

My CSS

 .bgImageOverTop{
    width:100%;
    height:2490px; height:2460px; height:3000px;
    background: url("../images/midSection-Approach.png") 50% 50% no-repeat; 
    background-size: cover;
    position:relative;
    z-index:50;
}
.wrapperTwo{
    width:886px;
    padding-left:33px;
    padding-right:33px;
    margin:auto;
    height:auto; height:2950px;
    position:relative;
    top:0px;
    z-index:1500;
}

.ourApproach{
    float:left;
    text-align:center;
    font-family: 'rudaregular';
    height:auto;
    margin-top:130px;   
    padding:0 10px 0px 10px;
    position:relative;
    z-index:1500;
}
.feedsBox{
    width:auto;
    height:auto;
    position:relative;
    z-index:50;
}
#scopeControl{
    position:relative;
    top:432px;
    left:263px;
}
#scope{
    position:relative;
    top:0px;
}
.scopeFeedsBox{
    width:210px;
    height:auto;
    line-height:1em;
    position:relative;
    top:-70px;
    left:270px;
}
.scopeFeedsBox ul{
    float:left;
    list-style-type:none;
}
.scopeFeedsBox ul li {
    float:left;
    width:210px;
    display:inline;
    font-size:.9em;
    line-height:1.2em;
    text-align:left;
}

[Paulie_D]

Not seeing the issue you are referring to but there is this on line 64 (ish) or your CSS.

h1, h2, h3, p {
margin: 0 0 10px;
}

Other than that, perhaps it’s the positioning values?

[grantSenior]

Thank you for looking and spotting the “margin: 0 0 10px;” line. It hasn’t fixed the problem, but I think that line does need to go. The text is still being offset when I maximise the browser.

[grantSenior]

I’m intrigued that you are unable to see the problem, did you use the “scope” link to scroll to the yellow background section with the heading ‘Scope” in the circle, and did you maximise your browser to full screen by using the browser’s Maximise button, top right in the browser? Apologies for asking an obvious question, but I need to know if you’re not seeing the problem, as for me and other testers the text does drop by about 15 pixels.

Cheers

[Edgarr]

@grantSenior, I am not seeing the issue either. In your first comment when you say “Everything is fine until the browser is maximised and fills the screen”, how big is your screen?

[grantSenior]

Thanks for looking Edgarr. My screen size is 1920 x 1200

I think I have found out what the problem is and I think it’s only noticeable on larger monitors. The image with the circles is being used as a background image on the main wrapping div, and is using background-size: cover; So on larger monitors the image is getting bigger which is putting out the alignment, and for me it’s about 15 pixels.

[Author]

Posts