CODEWITHSUNDEEP
htmlcss
Matt.Owen
Matt.Owen

Reputation: 391

My text moves up and down when my browser resizes

I have been working on a new homepage for my website, but I can't figure out why text moves up and down when I resize my browser.

My CSS Code:

.welcome {
    width: 100%;
    height: 60px;
    background-color: #4CAF50;
    margin-top: -4px;
}

.welcome h1 {
    font-family: 'Lato', sans-serif;
    color: white;
    font-size: 40px;
    margin-bottom: 20px;
    margin-top: 5px;
    margin-left: 15px;
}

.welcome p {
    color: white;
    overflow: hidden;
    float: left;
    position: relative;
    top: -50em;
}

#welcome-background {
    width: 100%;
    height: auto;
    max-height: 1000px;
    margin-top: -16px;
    min-height: 500px;
}

If you see any other CSS error's please let me know

My HTML:

<div class="welcome">
    <h1 style="float:left;">About Us</h1>
    <img id="welcome-background" style="" src="/new_homepage/img/black-bg.png">
    <p style="color: white; position: relative; top: -50em;">Hardwire Studios' is a gaming community that has servers am a variety of games, such as Minecraft, Garry's Mod, Counter-Strike: Global Offensive, Rust, and many more coming in the future. We try to provide the best "Lag-Free" experience on all of our server, yet also make them as fun and enjoyable as they can be, by only using the best of the best host companies. You can also see our future plan's by simply scrolling down a little more, until you find the "Future Plan's" Section.</p>
</div>

Upvotes: 0

Views: 1902

Answers (1)

darrylyeo
darrylyeo

Reputation: 3453

Your paragraph uses relative positioning, which means it is still in the flow of the document. Because it comes after an image, its vertical position changes as the height of the image changes.

Instead. put the image and paragraph inside of a wrapper element that is positioned relatively, then position the paragraph with absolute positioning.

This could look something like this:

HTML:

<div id="welcome-wrapper">
    <img id="welcome-background" src="...">
    <p>Hardwire Studios' is...</p>
</div>

CSS:

#welcome-wrapper {
    position: relative;
}

#welcome-wrapper p {
    position: absolute;
    top: 10em;
}

Upvotes: 1

Related Questions