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 trialSicebisile Bukhwele
996 PointsWhy do we create rules to target a floated image inside a media query
what are the benefits of doing so...
1 Answer
Jamie Reardon
Treehouse Project ReviewerWhen creating responsive layouts there is a typical best practice and go to method named Mobile-first approach which developers use when coding with responsiveness in mind. This approach has a main concept of styling base styles for a mobile device first and then styling for device screen sizes upwards, which means that you only use min-width media queries.
With smaller screen sizes such as a mobile the screen is too narrow to display content across multiple columns. You therefore typically have room for a one column layout which means that this image will be on its own line as well as the paragraph. As the 769px screen size comes up, you can then fit a 2 column layout which allows the img to float side by side the paragraph element.
One advantage to using the mobile-first approach is that you donβt have to worry about adjusting a complex layout for smaller screen sizes, it is much easier to adapt your content upwards in screen sizes as the width and space of the screen size opens up, you can plan/layout your content much easier.
Sicebisile Bukhwele
996 PointsSicebisile Bukhwele
996 PointsThat's a pellucid explanation. Bravo
Jamie Reardon
Treehouse Project ReviewerJamie Reardon
Treehouse Project ReviewerThanks :) Glad that it helped!