How would you write a media query for screens smaller than 768px?
Writing Media Queries for Small Screens in CSS
To target screens smaller than 768px, you can use the max-width property in a CSS media query. This ensures that the styles inside the query apply only when the viewport width is less than or equal to 768px — typically covering mobile devices and small tablets.
When to Use max-width Media Queries
For applying styles specifically to mobile or small devices.
To simplify layouts, hide large elements, or reduce padding and margins on small screens.
When following a desktop-first design approach (starting from large screens and adjusting downward).
Example: CSS Media Query for Screens Smaller Than 768px
In this example, the styles apply only when the screen width is 768px or smaller. The text size and padding are reduced, and the sidebar is hidden to optimize the layout for mobile users.