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

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.