Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kord Monaco
Kord Monaco
3,443 Points
Posted by Kord Monaco
Kord Monaco
3,443 Points

My title stays fixed to the left side of my header image when the viewport width is <= 610px.

I have designed my first website from a mobile first approach and it looks fine below 610px, but collapses as soon as it reaches that width. I started to create a media query for that min-width, but I'm not sure what I would need to change. I have only been coding for 1.5 months so I realize it is probably something very simple I am doing wrong.

Here is my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The natural wonders of Sedona, Arizona</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="header">
            <div id="background-img">
                <h1 class="title">Sedona, Arizona</h1>
            </div>
        </header>
            <div class="nav-container">
                <nav>
                    <ul>
                        <a href="index.html">Home</a>
                        <a href="#History">History</a>
                        <a href="#Hiking">Hiking</a>
                    </ul>
                </nav>
            </div>

        <main>
            <cite><p class="quote"><q>Seeing the iconic red rocks of Sedona will simply take your breath away. You will be awestruck by the majestic crimson rock formations and perhaps feel the energy for which this area is known. Put simply - there is no other place on earth like Sedona.</q></p></cite>

            <section>
                <h2 id="History">History of Sedona</h2>
                <p>Archaeologists claim that Sedona’s history dates back approximately 10,000 years when the first settlers to the area, Native American cave dwellers, inhabited the caves in and around the Sedona area. The Hopi Indian’s, in a feat that is still marveled at today, grew corn, beans and squash in an area where only 15 to 20 inches of rain falls per year.

                    Examples of the four- and five-story structures built by the Sinagua, Anasazi and Hohokam tribes, such as Montezuma’s Castle or the Casa Grande ruins, provide excellent examples of early life in the Sedona area. Why the last tribe disappeared around 500 years ago still remains a mystery to this day.

                    The first Europeans, a Spanish expedition in search of rich Indian mines, discovered the Sedona area in 1583. Sedona began as a small, remote ranching and farming settlement in 1876 when the first permanent settler, John James Thompson, squatted in Oak Creek Canyon. By the early 1900s, two dozen families lived in the settlement. In 1902, Theodore Schnebly petitioned for a new postal station, and when approved, he named the new post office Sedona, after his wife.</p>
            </section>

            <section>
                <h2 id="Hiking">Hiking in Sedona</h2>
                <p>Sedona is renowned for its abundance of hiking trails and outdoor activities. No matter your age or physical shape, there are trails for skills levels. In Sedona, beauty surrounds you, but for up close, personal and jaw-dropping sights created by nature, you’ll want to go off the beaten track. With more than 200 trails covering 300-plus miles in the Sedona area, it’s easy to find a new path to wander. What’s hard is deciding which path to take. Whether hiking, biking, walking or running, there’s a route for you. </p>

                <div id="hiking-images">
                    <img src="images/img1.jpg" class="img" alt="Sedona Hiking" id="img1">
                    <img src="images/img2.jpg" class="img" alt="Sedona Hiking" id="img2">
                    <img src="images/img3.jpg" class="img" alt="Sedona Hiking" id="img3">
                    <img src="images/img4.jpg" class="img" alt="Sedona Hiking" id="img4">
                </div>

                <p>To learn more about hiking trails in Sedona <a href="https://www.alltrails.com/us/arizona/sedona" target="_blank">Click here</a></p>
            </section>
        </main>

        <footer>
            <span>&copy; Monaco Dev 2020</span>
        </footer>
    </div>
</body>
</html>

And here is my CSS:

/* Base Styles */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    width: auto;
    min-width: 300px;
    background-color: rgba(128, 120, 120, 0.349);
    text-align: center;
    margin: auto;
    height: auto;
}

.title {
    font-size: 6em;
    font-family: 'Amatic SC', cursive;
    text-align: center;
    line-height: 1;
    color: white;
    text-shadow: 5px 5px 5px black;
    align-self: flex-end;

}


#background-img {
    width: auto;
    height: 400px;
    background-color: rgba(250, 80, 1, 0.438);
    background-image:
    linear-gradient(to bottom, rgba(250, 80, 1, 0.438), transparent),
    url("images/steady-hand-co-bgDw2l_L2n8-unsplash.jpg");
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
    display: flex;

}

/* --------------- Nav Styles -------------*/


nav {
    margin-bottom: 10px;
}

ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


nav a {
    text-decoration: none;
    color: black;
    font-size: 1.5em;
}



nav a:hover {
    color: rgba(250, 30, 1, 0.918);
}


/* --------------- Nav Styles -------------*/


main {
    padding-left: 5%;
    padding-right: 5%;
}

.quote {
    padding-bottom: 25px;
}

h1 {
    font-size: 2em;

}

h2 {
    font-size: 2em;
    padding-bottom: 10px;
}
section {
    padding-bottom: 30px;
}

p {
    font-size: 1.25em;
    line-height: 2em;
    margin-bottom: 20px;
}

#hiking-images {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.img {
    width: 50%;

}

a:hover {
    color: rgba(250, 30, 1, 0.918);
}

footer {
    padding-top: 10px;
    border-top: 2px solid lightslategray;
}


/* ------ Media Queries ----------- */
@media (min-width: 457px) {
    .title {
        font-size: 8em;
        padding-bottom: 10px;

    }

}

@media (min-width: 610px) {}


/* ------ Media Queries ----------- */
Reggie Williams
Reggie Williams
Treehouse Teacher
Reggie Williams
Reggie Williams
Treehouse Teacher

Kord Monaco try adding some padding to your title. The text-align:center centers the text in the div but the div itself is aligned to the left side of the page by default

Kord Monaco
Kord Monaco
3,443 Points
Kord Monaco
Kord Monaco
3,443 Points

So should I just keep adding padding-left for that media query until it's positioned where I want? I thought there would be a property that would keep my title centered even at the higher screen width.

Kord Monaco
Kord Monaco
3,443 Points
Kord Monaco
Kord Monaco
3,443 Points

I tried adding margin and padding auto but nothing changed until I added display: flex to the background-img and then set justify content to center. Thank you for the help Reggie!

1 Answer

Reggie Williams
STAFF
Reggie Williams
Treehouse Teacher
Reggie Williams
Reggie Williams
Treehouse Teacher

Kord Monaco margin would actually be the more appropriate property but yes you could center it by giving it both a left and right margin of auto