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

Posted by Jeff McGee
Jeff McGee
Courses Plus Student 632 Points

Altering my website to take up the full screen of a monitor.

I am building a website, after viewing the the "How to build a simple website" tutorial. I am using grid.css (12 grids) and normailize.css as the demo used. I want to transform this website to take up the full screen. I have toyed around with it all day and can not figure it out. Can anyone give me ideas?

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Jeff - TL;DR If you just want to make grid.css just use 100% of a window, then change the .grid_12 and .container classes to use width: 100%

"Full Screen" can be tricky because screen sizes vary. Some people have a screen that's 1920px * wide while, some people have a screen that's *1366px wide.

What you need to do is have your CSS respond to the window size, that's what the Build a Responsive Website course covers, it comes later in the Learn HTML & CSS learning adventure.

Putra Muzhafar
Putra Muzhafar
1,607 Points
Putra Muzhafar
Putra Muzhafar
1,607 Points

Hi Jeff,

One thing I learnt so far is that you can set your <div> tags in CSS to width: 100%. I don't use the grid.css if I want my own styling done correctly :smiley:

Hope this helps.

Jeff McGee
PLUS
Jeff McGee
Courses Plus Student 632 Points
Jeff McGee
Jeff McGee
Courses Plus Student 632 Points

Hey Purta,

Can't you use grid.css and still have 100% width? I have been digging in grid.css all day. I have a feeling it has to do with the container or clearfix, but I can't figure it out. Thanks for your help!

Jeff

Putra Muzhafar
Putra Muzhafar
1,607 Points
Putra Muzhafar
Putra Muzhafar
1,607 Points

Hi Jeff :smiley:

The class .container sets your <div> to a 1000px. Don't get confused there buddy. If you still want to stick to grid.css, create a custom class in that and name your own class and make sure to set your width to 100%.

A good example would be

.newContainer {
    width: 100%;
    margin: auto;
}

And don't forget to assign your new class to your <div> :thumbsup:

I haven't got into the responsive web design project yet but I am certain that, that project will help you benefit in terms of having your site stretched to the full browser screen size :smiley:

Hope this helps! And you're most welcome. I'm learning, you're learning, we tend to help each other along the way!