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
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsHow to horizontally align images at the top in an ul set out in columns
Hello,
In my media queries my first row of images in the columns are not aligning correctly at the top. Does anyone know how to fix this problem efficiently?
html
<!doctype html> <html lang ="en">
<head> <meta charset ="utf-8"> <title>Photo Gallery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="normalize.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="nav.css"> </head>
<body>
<header id="search-bar">
<input type="text" name="search" placeholder="Search" value="search">
</header>
<div id="photo-container">
<ul>
<li><a href="Photos/01.jpg"><img src="Photos/01.jpg" alt="photo of a dry hill" class="photo"></a></li>
<li><a href="Photos/02.jpg"><img src="Photos/02.jpg" alt="photo of a blue lake" class="photo"></a></li>
<li><a href="Photos/03.jpg"><img src="Photos/03.jpg" alt="photo of a shrub hill" class="photo"></a></li>
<li><a href="Photos/04.jpg"><img src="Photos/04.jpg" alt="photo of a snowcapped hill" class="photo"></a></li>
<li><a href="Photos/05.jpg"><img src="Photos/05.jpg" alt="photo of rocky red earth" class="photo"></a></li>
<li><a href="Photos/06.jpg"><img src="Photos/06.jpg" alt="photo of dry grassland area" class="photo"></a></li>
<li><a href="Photos/07.jpg"><img src="Photos/07.jpg" alt="photo of a green valley" class="photo"></a></li>
<li><a href="Photos/08.jpg"><img src="Photos/08.jpg" alt="photo of sandunes" class="photo"></a></li>
<li><a href="Photos/09.jpg"><img src="Photos/09.jpg" alt="photo of path with overlapping greenery" class="photo"></a></li>
<li><a href="Photos/10.jpg"><img src="Photos/10.jpg" alt="photo of an ocean at dusk" class="photo"></a></li>
<li><a href="Photos/11.jpg"><img src="Photos/11.jpg" alt="photo of a landscape through a gap in trees" class="photo"></a></li>
<li><a href="Photos/12.jpg"><img src="Photos/12.jpg" alt="photo of a lavendar field" class="photo"></a></li>
</ul>
</div><!--closing photo-container-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="lightbox.js"></script>
</body>
</html>
mobile css
-
{
box-sizing: border-box; }
header{
height: 100px;
padding: 5px 5px;
margin-bottom: 5px;
}
/* Search bar styles*/
search-bar {
text-align: center; margin-top: 50px;
}
input[type=text] { width: 200px; height: 22px; border: none; border: 2px solid lightgray; border-radius: 6%; }
input[type=text]:focus { outline: 0; }
/* Photo container styles*/
photo-container ul {
list-style-type: none;
}
.photo {
width: 200px;
height: 200px;
margin-bottom: 30px;
padding: 5px;
margin-left: 14%;
}
}
nav css
@media screen and (min-width: 720px) {
input[type=text] {
width: 240px;
}
photo-container{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
photo-container {
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-moz-column-gap: 10px; /* Firefox */
column-gap: 10px;
}
photo-container {
max-width: 800px;
}
.photo { width: 150px; height:150px; }
@media screen and (min-width: 1020px) {
photo-container{
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
photo-container {
-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
-moz-column-gap: 60px; /* Firefox */
column-gap: 60px;
}
.photo { width: 200px; height: 200px; }
photo-container {
max-width: 980px;
display:block;
margin:auto;
}
#photo-container ul { padding-left: 0; }
}
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points-
{
box-sizing: border-box; }
header{
height: 100px;
padding: 5px 5px;
margin-bottom: 5px;
}
/* Search bar styles*/
search-bar {
text-align: center; margin-top: 50px;
}
input[type=text] { width: 200px; height: 22px; border: none; border: 2px solid lightgray; border-radius: 6%; }
input[type=text]:focus { outline: 0; }
/* Photo container styles*/
photo-container ul {
list-style-type: none;
position: relative;
}
.photo {
width: 200px;
height: 200px;
margin-bottom: 30px;
padding: 5px;
margin-left: 14%;
}
overlay {
background: black;
height: 300px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
text-align: center;
}
overlay img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
}
overlay p {
color: white;
}
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points/* header styles*/ header{ height: 100px; padding: 5px 5px; margin-bottom: 5px; } /* Search bar styles*/
search-bar {
text-align: center; margin-top: 50px; }
input[type=text] { width: 200px; height: 22px; border: none; border: 2px solid lightgray; border-radius: 6%; }
input[type=text]:focus { outline: 0; } /* Photo container styles*/
photo-container ul {
list-style-type: none;
position: relative;
}
.photo {
width: 200px;
height: 200px;
margin-bottom: 30px;
padding: 5px;
margin-left: 14%;
}
overlay {
background: black;
height: 300px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
text-align: center;
}
overlay img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
}
overlay p {
color: white;
}
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsSorry my css is not posting in here in one lot, will try and add another link and re ask the question as this is too hard to read.
1 Answer
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points-
{
box-sizing: border-box; }
header{
height: 100px;
padding: 5px 5px;
margin-bottom: 5px;
}
/* Search bar styles*/
search-bar {
text-align: center; margin-top: 50px;
}
input[type=text] { width: 200px; height: 22px; border: none; border: 2px solid lightgray; border-radius: 6%; }
input[type=text]:focus { outline: 0; }
/* Photo container styles*/
photo-container ul {
list-style-type: none;
position: relative;
}
.photo {
width: 200px;
height: 200px;
margin-bottom: 30px;
padding: 5px;
margin-left: 14%;
}
overlay {
background: black;
height: 300px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
text-align: center;
}
overlay img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
}
overlay p {
color: white;
}
Steven Parker
243,318 PointsSteven Parker
243,318 PointsWithout proper formatting, critical elements of your code get altered or removed.
Please format your code according to the instructions in the Markdown Cheatsheet below.