Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Non-scaleable website

Hello tree-dwellers, I have been working on an HTML website for a little while which can be seen here: http://www.open-mfg.com/index.html . When you adjust the size of the browser, the website becomes disfigured and ugly. I know how to make it adapt to different browser sizes but I do not want the website to scale. When the browser is re-sized, the website layout(words, pictures, ect.) should not change. I have looked online in many places but I still have not found a way to make this happen. There is probably an easy fix for this but I have no idea what it is. Thanks for reading and if you have any other questions, just ask. -Noah

3 Answers

Colin Marshall
Colin Marshall
32,861 Points

You need to set container widths to a size in pixels instead of percents.

One example from your site:

.nivoSlider {
width: 1000px;
}

It was originally set at 100%. Other than the slider you just need to the do the same type of thing for the navigation.

Thanks!

First off, great job with the site so far! Secondly, am I understanding you correctly that you do not want the website to be responsive? You want your content to remain fixed, regardless of the viewport/device that is used to view the site?

If you do not want any of the divs and elements to resize, then you will have to set the min-width to a pixel or em value that prevents the layout issues. I personally would recommend media queries. Once the viewport hits a specific width, then you could rearrange the content elements to fit better in those parameters: The code would look something like this:

@media screen and (max-width: 999px) { main{ -webkit-flex-direction: column; } }

I hope that helps!

Yeah this helps a lot, thanks a bunch!

James Barnett
James Barnett
39,199 Points

Personally rather than disabling responsiveness which is a core feature of modern web design, I'd suggest we point Noah in the direction to correctly implement RWD.

I wanted to implement RWD but I am not making this website for myself. I've tried to tell the person who I am making the website for why RWD is better than NRWD but he thinks that It will look better.

James Barnett
James Barnett
39,199 Points

I think you should give it another shot. Maybe show your client what it looks like on a tablet and on a phone, it most likely won't look good. Your client hires you know what's best for them.

Marcus Tisäter
Marcus Tisäter
4,886 Points

When this happens to me, I make a div wrapper which contains everything on the html document. Make the div wrapper in css with a min-width, min-heigh and max width and height. Try it

Matt Campbell
Matt Campbell
9,767 Points

That must be a nightmare or kinda pointless. What happens when you hit a resolution outside of the min to max?