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
Matthew Alessandri
326 PointsProblem With Gray Box
My images and the Gray text box underneath align perfectly when the screen is mobile and tablet view, yet when it grows to desktop view, the gray boxes around the images stretch passed the images around 20-30px. I need to align the images with the gray text box at all times. Please help :)
Matthew Alessandri
326 Points/**************************
GENERAL
**************************/
body {
font-family: 'Cabin', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img{
max-width: 100%
}
/**************************
HEADING
**************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 32px 0 0 0;
width: 100%;
}
#logo {
margin: 0;
max-width: 10%;
}
/**************************
NAVIGATION
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 30px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
clear: both;
}
/**************************
PAGE: PORTFOLIO
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
text-align: center;
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.85em;
color: #5C9B92;
}
/**************************
COLORS
**************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* white header */
header {
background: #fff;
}
/* nav background on mobile */
nav {
background: #5C9B92;
}
/* links */
a {
color: #6ab47b;
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link color */
nav a:hover {
color: #32673f;
}
Matthew Alessandri
326 Points/**************************
GENERAL
**************************/
body {
font-family: 'Cabin', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img{
max-width: 100%
}
/**************************
HEADING
**************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 32px 0 0 0;
width: 100%;
}
#logo {
margin: 0;
max-width: 10%;
}
/**************************
NAVIGATION
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 30px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
clear: both;
}
/**************************
PAGE: PORTFOLIO
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
text-align: center;
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.85em;
color: #5C9B92;
}
/**************************
COLORS
**************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* white header */
header {
background: #fff;
}
/* nav background on mobile */
nav {
background: #5C9B92;
}
/* links */
a {
color: #6ab47b;
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link color */
nav a:hover {
color: #32673f;
}
Chyno Deluxe
16,936 PointsWould it be possible for you to provide us a snapshot of your workspace so that we can view with all the images?
1 Answer
David Thomas
Courses Plus Student 21,263 Pointsfrom your description i'm not entirely sure what desired effect yout after - i think the grey box is stretching because the width set on it #gallery li {... width: 45%; ... } and the images might not be big enough to fill it... you could either add a px``max-widthon#gallery``` container or set the background on the image itself instead of the li with a bit of padding
#gallery a img {
color: #6ab47b;
background: grey;
padding: 10px;
width: 45%;
}
hope this helps
Matthew Alessandri
326 PointsMatthew Alessandri
326 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matthew Alessandri Studios</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Cabin:400,700,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <center><img src="img/logo.svg" alt="logo"></center> </a> <nav> <ul> <li><a href="index.html">Work</a></li> <li><a href="about.html">Personal</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/Frayed.jpg"> <img src="img/Frayed.jpg" alt="Frayed"> <p>Frayed</p> </a> </li> <li> <a href="img/LaMer.jpg"> <img src="img/LaMer.jpg" alt="La Mer"> <p>La Mer</p> </a> </li> <li> <a href="img/Veloce.jpg"> <img src="img/Veloce.jpg" alt="Veloce"> <p>Veloce</p> </a> </li> <li> <a href="img/LPSP.jpg"> <img src="img/LPSP.jpg" alt="LPSP"> <p>Self Portrait</p> </a> </li> <li> <a href="img/TGB.jpg"> <img src="img/TGB.jpg" alt="TGB"> <p>Graveyard Book</p> </a> </li> <li> <a href="img/Soon.jpg"> <img src="img/Soon.jpg" alt="Soon"> <p>Coming Soon</p> </a> </li> </ul> </section> <footer> <p>© 2015 Matthew Alessandri.</p> </footer> </div> </body> </html>