To determine when to use a break point, you must first resize your browser window and see
how the elements of your website respond. While playing around with various screen sizes,
take note of any points where the content looks out of place or misaligned. This is usually
where a breakpoint is needed. at minimum, 3 different breakpoints are needed to have a
responsive design. Mobile-first design is the standard for modern web design.
Sources:
w3schools.com,
browserstack.com,
and dev.to