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

CSS CSS Layout Basics Page Layout with the Float Property Wrapping Text Around Images with Floats

Why do we create rules to target a floated image inside a media query

what are the benefits of doing so...

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

When 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.

That's a pellucid explanation. Bravo