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
Ben Riley
975 PointsUtilizing 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
8,691 PointsH 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
woodworth
Front End Web Development Techdegree Student 19,831 PointsIf 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/