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 trialMatthew Alessandri
326 PointsGray text box exceeds images
When I stretch the page out to full size, the gray box around the images stretch about 30px to the right. However, when i minimize the page the mobile view, it aligns perfectly. Any reason the image and box do not maintain the same width when the page is full screen?
4 Answers
Maria Caruso
2,858 PointsIt's hard to tell without your html. Try changing your max-width on the wrapper to 100%. How does that affect the elements? I suspect that since your max-width is set to an exact amount and everything else is set to percentages, this is what is causing the issue.
Matthew Alessandri
326 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Matthew Alessandri | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<div style="text-align:center;"><img src="img/Logo.svg" alt="logo"></div>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">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/21.PNG">
<img src="img/21.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/22.PNG">
<img src="img/22.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/23.PNG">
<img src="img/23.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/24.PNG">
<img src="img/24.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/25.PNG">
<img src="img/25.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/26.PNG">
<img src="img/26.PNG" alt="">
<p>Frayed</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2015 Matthew Alessandri.</p>
</footer>
</div>
</body>
</html>
bothxp
16,510 PointsHi Matthew,
I agree with Maria that we are probably going to need you to post your HTML to try and figure out what's happening. I don't think it's going to be to do with the max-width or your use of %'s as that is how the CSS is setup in the course.
I tried using the CSS that you posted against the HTML used in the course and I couldn't replica your issue.
Matthew Alessandri
326 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Matthew Alessandri | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<div style="text-align:center;"><img src="img/Logo.svg" alt="logo"></div>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">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/21.PNG">
<img src="img/21.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/22.PNG">
<img src="img/22.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/23.PNG">
<img src="img/23.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/24.PNG">
<img src="img/24.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/25.PNG">
<img src="img/25.PNG" alt="">
<p>Frayed</p>
</a>
</li>
<li>
<a href="img/26.PNG">
<img src="img/26.PNG" alt="">
<p>Frayed</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2015 Matthew Alessandri.</p>
</footer>
</div>
</body>
</html>
bothxp
16,510 PointsThanks for adding the HTML.
I've tried out using your HTML & CSS, just substituting in some images. In my tests the grey boxes appear to be sizing ok. Am I note looking at the right thing?
Matthew Alessandri
326 Pointshow strange, even in full screen desktop mode the gray boxes line up correct? Maybe i need to change browsers
Maria Caruso
2,858 PointsThere will be some sizing issues across browsers. Chrome has a much wider layout than firefox for example. Personally, I've not found an easy way around this other than adding extra padding to compensate between browser differences.
Matthew Alessandri
326 PointsMatthew Alessandri
326 Points(Edited: by BothXP to add the markdown to format the CSS)