For the second project of the first Level II module of Design Studio, I expanded upon previous knowledge of HTML & jQuery in order to make the website fully responsive.
Primary Objective: Update an existing website that has at least five pages and a navigation menu. Use the techniques covered in the activities to give it an attractive design and make it responsive. It should have at least three breakpoints (mobile, medium, large desktop) but the exact details are up to you.
The source code below allows for set breakpoints to occur at the following screen resolutions:
(min-width: 44.375em) -or- 710px
(min-width: 48.9375em) -or- 783px
(min-width: 56.875em) -or- 910px
(min-width: 61.5625em) -or- 985px
(min-width: 75em) -or- 1200px
These widths designate specific snap points that allow site elements to re-order themselves in order to prioritze important content at the top of the page when viewing the site on a smaller screen.
[codeblock name=’Responsive Grid’]