Welcome to the Treehouse Community
Looking to learn something new?
Utilizing the max-width: 100% property
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.
Dan Henning8,691 Points
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/