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
Noah Cooke
2,608 PointsNon-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
32,861 PointsYou 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.
Mark Filter
32,718 PointsFirst 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!
Noah Cooke
2,608 PointsYeah this helps a lot, thanks a bunch!
James Barnett
39,199 PointsPersonally 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.
Noah Cooke
2,608 PointsI 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
39,199 PointsI 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
4,886 PointsWhen 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
9,767 PointsThat must be a nightmare or kinda pointless. What happens when you hit a resolution outside of the min to max?
Noah Cooke
2,608 PointsNoah Cooke
2,608 PointsThanks!