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 trialDoron Geyer
Full Stack JavaScript Techdegree Student 13,897 Pointsafter adding " 50vw, (min-width:1024px) 512px" image size no longer changes from medium
as mentioned adding
" 50vw,
(min-width:1024px) 512px"
to the html it my browser no longer changes file size on the image at all. I have tried this in chrome and firefox dev edition. Before adding this code the browser still adjusts file sizes.
the code is as shown in the video I have just shortened the P tags here for space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Images</title>
<link rel="stylesheet" href="css/normalize.css" />
<link
href="http://fonts.googleapis.com/css?family=Nunito:400,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/main.css" />
<script src="js/picturefill.min.js" async></script>
</head>
<body>
<div class="wrapper">
<img
sizes=" 50vw,
(min-width:1024px) 512px"
srcset="img/banner-large.jpg 2048w,
img/banner-medium.jpg 1400w,
img/banner-medium.jpg 800w"
src="img/banner-medium.jpg"
alt="Nick pettit in front of some trees"
class="banner-image"
/>
<div class="content-block">
<div class="profile-description">
<div class="profile-image">
<img
srcset="img/photo-@2x.jpg 2x, img/photo-@1x.jpg 1x"
src="img/photo-@2x.jpg"
alt="photograph of a flower"
/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
</p>
<p>
Integer dignissim ultrices lacus tincidunt aliquet. Cras maximus
.
</p>
<p>
Cras blandit at urna sagittis consequat. Integer tristique mollis
</p>
</div>
</div>
</div>
</body>
</html>
1 Answer
Chirag Mehta
15,332 PointsHey Doron,
Don't know if you resolved this but I actually found your question while googling. I had the same issue and I think it's because Nick has a higher res display. I increased max-width of .wrapper in CSS and then updated sizes to match this larger width on .wrapper.
.wrapper {
max-width: 1250px;
margin: 0 auto;
}
sizes="(min-width: 1250px) 625px, 50vw"
That fixed the issue on my non-high res screen.