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.

CSS

Utilizing the max-width: 100% property

Hello,

I'm following the "How to make a Website" track for the first time. I've been building the website according to the instructions of the videos, only I've created a section in the navigation called "Reviews". I'm trying to build a basic website for my small business and this review section will be helpful.

I have a Google+ page with about 10 reviews on it for my business. I've figured out how to post those reviews again and copy the embedded code and now have the reviews embedded in my Reviews part of the website. These reviews look great on the page, but the only thing I'm concerned about is when people would potentially view it on a mobile device.

I remember going through the videos how the instructor applied the max-width: 100% property to the pictures in CSS on the Portfolio page, and I've also noticed the text is fitting the window when re-sized. Basically, I'd like to apply that same sort of property to these Review posts that are embedded code. Currently, when viewing in a small sized window the boxes don't fit to the re-sizing of the window properly.

I hope that all makes sense.

Thanks,

2 Answers

Dan Henning
Dan Henning
8,691 Points

H Ben,

I would recommend creating a mockup web page that contains only <div> containers. And use media queries to determine how those containers should behave at specific widths. Watch the Nick Pettit videos and look for the image gallery / catalog examples.

Using the mobile-first approach, when the device width is narrow, allow your containers to consume 100% of the width. Then experiment with max-width, margin, padding, or even floating the containers to the left or right as the media queries allow for larger devices.

You can also download a CSS framework, such as Bootstrap, and observe how it manages content behavior that resembles what you are trying to achieve.

Best Regards, Dan

If your reviews are embedded code, like an iframe, wrap it in a new div container and add your CSS style to this new div to make it responsive. This article covers several different embed elements: https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/