I’m at the “Responsive Club Website” project. Because I was lacking inspiration and felt I needed more practice first I decided to recreate the example. I looked at the CSS via good developer tools. I notice that the photo images don’t work right on my example. On the original example, they go into a column and span the width of the browser when it is made smaller but this isn’t happening on my version.
What am I doing differently and how can I get it to do this? Thanks for any answers.
Here is the original example: South Village Run Club
Here is my replica: South Village Run Club
And here is the code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>South Village Run Club</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="bar">
<ul>
<a href="#">
<li>Events</li>
</a>
<a href="#">
<li>Results</li>
</a>
<a href="#">
<li>Partnering Restaurants</li>
</a>
</ul>
</div>
<div class="intro">
<h1>South Village Run Club</h1>
</div>
<div class="summary">
<h2>Meet up. Work out. Celebrate.</h2>
<p>Come join our vibrant community whose focus is training hard and enjoying local post-workout cuisine - guilt-free!</p>
<p>South Village Run Club is a free MeetUp group sponsored by <a href="">City Shoes</a>.</p>
</div>
<div class="photos">
<img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/tunnel-runners.jpg">
<img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/meetup-wine.jpg">
<img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/runners-grayscale.jpg">
</div>
<div class="testimonial">
<h1>"I build my weeknight plans around their events. I can exercise and meet new people every week!"</h1>
<p>-Bryce R. - financial advisor/frequent runner since 2018</p>
</div>
<div class="photos">
<img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/coffeshop.jpg">
<img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/marathon-runners.jpg">
<img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/hangouts.jpg">
</div>
<div class="meetup">
<h1>Come join the fun!</h1>
<img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/runners-church.jpg">
<h1>We meet every evening in the city square at 7PM!</h1>
</div>
<div class="bar">
<ul>
<a href=""><li>Events</li></a>
<a href=""><li>Results</li></a>
<a href=""><li>Partnering Restaurants</li></a>
</ul>
</div>
</body>
</html>
body {
font-family: Montserrat, sans-serif;
font-size: 16px;
margin: 0;
background-color: lightsalmon;
}
.bar {
padding-top: 1rem;
background-color: teal;
color: lightsalmon;
}
ul {
list-style: none;
margin: 0;
}
li {
color: lightsalmon;
padding: 0.5rem 1.5rem;
margin-right: 1.5rem;
display: inline-block;
}
.intro {
height: 30rem;
padding-top: 1rem;
background-image: url('https://www.ausleisure.com.au/images/ausleisure/files/_news-main/People_running_ASICS_1lr.jpg');
background-position: center;
background-repeat: no-repeat;
}
.intro h1 {
color: coral;
font-size: 2rem;
margin-top: 10rem;
padding: 2rem;
background-color:rgba(0.5, 0.5, 0.5, 0.5);
text-align: center;
}
.summary {
padding: 0 1rem;
}
.summary, .testimonial, .photos, .meetup {
margin: 4em auto;
}
.summary h2 {
color: yellow;
}
.summary p {
color: white;
}
.photos img {
width: 30%;
margin: 1.5%;
}
.testimonial {
background-color: teal;
height: 20rem;
padding: 0 1 rem;
padding-top: 1rem;
color: yellow;
}
.testimonial h1 {
font-size: 2.5rem;
color: yellow;
}
.meetup {
margin-bottom: 2rem;
}
.meetup h1 {
color: yellow;
text-align: center;
}
.meetup img {
width: 50%;
height: auto;
display: block;
margin: auto;
}
.bar {
padding-top: 1rem;
background-color: teal;
color: lightsalmon;
}
@media only screen and (max-width: 1048px)
.photos img {
width: 100%;
margin-left: auto;
margin-right: auto;
}