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

CSS

Tony Shangkuan
Tony Shangkuan
7,200 Points
Posted by Tony Shangkuan
Tony Shangkuan
7,200 Points

The image (main.jpg) does not fit to the screen as I narrow the screen !!!

I tried it several times and even by having exactly the same code as the instructor has, and the image was cut as I narrow the screen width. Anyone has the same issue?

2 Answers

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points

Yeah, it seems that this practice session is just a bit dated. I would not worry about this issue with the image. The media queries you wrote are great! I would just move on to the next content honestly. I'll make a note on this practice. :smiley:

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,997 Points

Hey Tony Shangkuan ! :wave:

I'm not exactly sure what you're referring to specifically as this was just posted in the CSS general topic, not associated with a video or challenge.

But it sounds like possibly a width: 100% on the image may help if it's breaking outside the screen horizontally.

If that doesn't help, check that it's in the correct spot in the HTML, and if problems still persist, please provide either a link to your Workspace snapshot, GitHub Repo if you have one or paste your code here within triple backticks ```

A link to the video you're watching will be helpful as well. :smiley:

Tony Shangkuan
Tony Shangkuan
7,200 Points
Tony Shangkuan
Tony Shangkuan
7,200 Points

Here is the link to the practice to Media Queries: https://teamtreehouse.com/library/practice-media-queries/lets-practice-media-queries

And below is my CSS style sheet code:

/* ================================================= Practice Media Queries ==================================================== */

/* Target viewport sizes less than 576px */ ```@media screen and (max-width:575px){

header { text-align: center; margin-bottom: 2.5rem; } .logo { margin-bottom: 0; } nav a { padding: 6px 0; background: #def1f9; margin: .2em 0; } img { display: none; } }

/* Target viewport sizes 576px and wider */ ```@media screen and (min-width:576px){

.logo { float: left; } nav { margin-top: 24px; } nav li { display: inline-block; margin: 0 0.45em; } h2 { margin-bottom: 1.5em; } }

/* Target a viewport range wider than 575px and narrower than 992px */ ```@media screen and (min-width:576px) and (max-width:991px){

nav { float: left; margin-left: 20px; } }

/* Target viewport sizes 768px and wider */ ```@media screen and (min-width:768px){

.articles { float: left; width: 65%; } aside { float: right; width: 30%; } }

/* Target viewport sizes 992px and wider */ ```@media screen and (min-width:992px){

nav { float: right; } }