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
John Levy
1,451 PointsProblems making the min-width of a page
I have a page where I want the width to only go down to 601px. How do I do this? I have done @media screen and (min-width: 601px) but the page still goes smaller than 601px when I shrink it down. Where am I going wrong? thanks in advance
6 Answers
Tamur Farrokhnia
27,197 PointsI suppose I should clarify what you mean when you say the page still shrinks. Do you mean you can resize the window below 601? Because you will always be able to do that. The only control you have is over how small the content inside the window gets. If you make the window smaller than 601 px, a scrollbar will appear because the content won't shrink anymore, but you will still be able to make the window smaller.
If your content is actually shrinking still, there must be some sort of problem with your code. It would help if you could post either a link to your site or use the markdown option to actually post your code like I did above, that was I can properly examine it.
Tommy Leng
Front End Web Development Techdegree Student 12,417 Pointstry max-width: 601px
Tamur Farrokhnia
27,197 PointsHey John,
by using @media, you're not actually setting the width of anything, but rather just creating a media query.
A media query specifies a condition, and all the CSS you put in it will only activate if that condition is met.
So in your example, you're just telling the browser, "only use the css in this media query if the window is a minimum of 601 pixels wide".
@media screen and (min-width: 601px) {
/*any css you write here will only activate if the window is 601px or larger*/
}
If you want to actually force the width to go no smaller than 601px, you will need to target the body of the document and set the min-width to 601, like this
body {
min-width: 601px;
}
John Levy
1,451 PointsThanks for your feedback. I am still having trouble.
I did this -
@media screen and (min-width: 601px) {
body {
min-width: 601px;
}
The page still reduces bellow 601px though. What elese could be the issue? Thanks
Tamur Farrokhnia
27,197 PointsYou actually don't need the media query at all, just this bit:
body {
min-width: 601px;
}
By putting the body min-width in the media query like you did, you are basically saying, "make the body be at least 601px wide if the window is greater than 601px wide", which effectively does nothing.
I realize now that what I said before might have been confusing. I just wanted to explain what a media query is and how it was different from what you were trying to do. Didn't mean to imply you need both.
John Levy
1,451 PointsThanks for explaining it again.
I did what I think you said and I am still having issues. In the body I wrote
body {
background-color: white;
min-width: 601px;
}
In case it had something to do with the media queries I also wrote this in the body in each media query and the page still shrinks down to below 601px. Do you have any idea what I could be doing wrong? Thanks in advance
John Levy
1,451 PointsOh I see I thought the page would stop at 601px I did not realize the page will still be able to resize further. Thanks for your help.