CODEWITHSUNDEEP
css
Achievem
Achievem

Reputation: 1

Text does not stay within background image on mobile

I have an H2 (id=cover) which I'd like to stay centered and higher up in a background image, but as the page size shrinks it eventually drops to the bottom of the image, then falls off of it on my mobile android phone. Any help would be appreciated. Here is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Johnson Landscaping</title>
    <link rel="stylesheet" href="style.css">
</head>
<div id="container">
<header>
    <h1>Johnson Landscaping</h1>
<nav>
<ul class="menu">
    <li><a href="index.html">home</a></li>
    <li><a href="contact.html">contact us</a></li>
</ul>
</nav>
</header>
<div>
    <div class="image">

        <img src="images/background-backlight-blur-color-262713.jpg" alt="" />

            <h2 id="cover"><span>Quality Garden Care on the North Shore</span></h2>

    </div>
<h2>Services</h2>
    <div class="Services">
        <h4>Garden Maintenance</h4>
        <img src="images/person-holding-a-green-plant-1072824.jpg" alt="person holding green 
plant">
            <p>Enter Details</p>
    </div>
    <div class="Services">
        <h4>Garden Design</h4>
        <img src="images/blade-of-grass-depth-of-field-environment-garden-580900.jpg" alt="blades of 
grass">
        <p>Enter Details</p>
    </div>
    <div class="Services">
        <h4>Tree and Shrub Pruning</h4>
        <img src="images/apple-tree-6035.jpg" alt="apple tree">
        <p>Enter Details</p>
    </div>
    <div class="Services">
        <h4>Pressure Washing</h4>
        <img src="images/photography-of-bricks-covered-with-moss-1089280.jpg" alt="bricks 
covered in moss">
        <p>Enter Details</p>
    </div>
</main>
</div>
<footer>
    <nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="contact.html">contact us</a></li>
    </ul>
    </nav>
</footer>
</body>
</html>

and css to go with it

html {
background: #f7f7f7;
color: #7cae49;
font-family: 'garamond', sans-serif;
}

body {
background: white;
margin: 0 auto;
font-family: 'garamond', sans-serif;
color: rgb(49, 46, 46);
text-align: center;
}

h1 {
float: none;
display: inline-block;
color: #5c7e3a;
width: 100%;
font-size: 50px;
text-align: center;
}

nav, li {
    display: inline-block;
}

header, footer {
    background: #DAF7A6;
    color: #7cae49;
    border-radius: 10px;
}

footer {
    text-align: center;
    padding: 30px 20px;
}

li {
    list-style: none;
    line-height: 20px;
    font-size: 40px;
    padding-right: 20px;
    padding-top: 5px;
}

.image { 
    position: relative; 
    height: 60;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
 }

 #cover { 
    position: absolute; 
    top: 200px; 
    width: 100%; 
    color: white;
    text-align: center;
    vertical-align: middle;
    display: flex, inline-block;
    font-size: 20px;
 }

a {
    text-decoration: none;
    color: inherit;

}

a:hover {
    color: #0e69e9;
}

h2 {
    color: #7cae49;
    text-align: center;
    font-size: 30px;
}

.Services {
    box-sizing: border-box;
    width: 90%;
    margin: 5px;
    padding: 5px;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    color: #7cae49;
}

img {
    max-height: 60%;
    max-width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;

}

Thanks for looking. Cheers!

Upvotes: 0

Views: 181

Answers (1)

Hiran
Hiran

Reputation: 7

Try this. inside your style.css in #cover, change the top value to 0px;

#cover { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    color: white;
    text-align: center;
    vertical-align: middle;
    display: flex, inline-block;
    font-size: 20px;
 }

Upvotes: 1

Related Questions