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 CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

Steven mudie
Steven mudie
5,523 Points

how would this work for bigger monitors?

@media (max-width: 1024px) { .primary-content, .secondary-content { width: 90%; } }

1024 px is around a quarter of my screen, when i make the window as narrow as it can be and drag it out it goes from small to big then after that width specified it goes back smaller. again.

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Later on in another css course if you are following the front end track (I think either css layout basics or responsive layouts), you will start to see why you should develop websites from a mobile first approach.

However to answer your question, in narrower screen sizes such as tablets and phones you will want to take up as much of the browser width as possible as content will be too narrow and cramped when viewing them on these kind of devices. A phone layout will typically display content in a one column layout due to the narrow screen in portrait mode. A tablet typically shows content in a two column layout, and a wider desktop would typically display content in a three plus column layout due to the screen width being more open you can therefore use more of the width. However on larger screen sizes past this break point specified in your question the reason why the content reduces to a smaller width is because on these larger screen resolutions you dont want the content displaying too wide because that is just too difficult to read. Check other webpages out and inspect their container/wrapper with the chrome developer tools and you will see that they would have styled it to be a smaller width for larger screen sizes to prevent content from becoming too wide.

Sorry for the long clarification, I hope it helps you understand in some way.

Steven mudie
Steven mudie
5,523 Points

answered perfectly, thanks. im on the fullstack javascript course i just wanted to learn some basic things before i went onto bootstrap because i thought to myself "if i could style i could make some pretty cool stuff". Personally i would rather use a framework like bootstrap because i find css mundane and couldn't sit there and change everything for several screen sizes