CSS Responsive Layout

Question 1

What is a breakpoint in responsive Web design?

Answer 1

“point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience

Question 2

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

Answer 2

50% allows you to resize with the page
and with the parent object size
if it is fixed the object will take too little space if the page shrinks

Question 3

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

Answer 3

CSS reads up to down so since it is on the bottom it takes the latest rule so it has a lower min width so it takes more options

source order issue
(rule priority)