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

Adam Smallman
Adam Smallman
4,182 Points
Posted by Adam Smallman
Adam Smallman
4,182 Points

100% grid.

Hey guys so I am building a site for uni, I am building a single page website. All is going great, the form works bla bla bla. But I need it to be 100% sized. Putting it without a grid, works but its not responsive as we all know. So changing the grid too 100% works too and is responsive, but when the screen is changed, re-sized the "items" that is the website try to move itself around to fit 100% of the screen in some cases this would be good but for this it is not. I need it to be 100% but not move around when the screen is made smaller in the browser.

Hope this makes sense!

Thanks

1 Answer

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

So you want your content to not move around when your screen is made smaller?

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

Sort off, When I set a grid too 100% width not say 960px ect the things inside of the site will re-size themselves and move around to fit on to the screen no matter how small it gets. Responsive wise it works great, All Screen sizes it fits very well. But if the internet browser is re-sized in any way then images ect will re-size to fit in side. i.e taking up 100% of the window size.

I need a way to make the site be 100% of the screen size, but once the window is re-sized the website does not re-size with it. But is still responsive as Grids always are.

Carman A
Carman A
7,672 Points

Part of responsive Web-Design is the content resizing to fit in the screen as it get's bigger (imac's or big monitor's), or smaller (smartphones net-books tablet's). So that's why percentage's are used because fixed pixel width's/heights won't scale with screen's. But if you don't want your site to scale at all your going to have to use pixel's not percentage's and if you want it to take 100% of the screen your working on use width: whatever your screen size is; and for text use whitespace: nowrap;.

If you want your content to resize with the screen but stay in the same layout set your widths, to percentages ,and your grid, and use *media queries *, to target certain content. For images use img { max-width: 100%;} and watch the videos on responsive images ( I can't explain this because I don't fully understand them yet ) Hope this help's if it doesn't lemme know :)