Make Page Responsive

So far, we have not done much to make the web site responsive. We will start by making the page responsive by setting breakpoints (media queries behind the scene) for the three most common formats.

TIP: It is best to plan out your website to avoid having to create more breakpoints than necessary. Below is a typical scenario of making a page responsive.

• Desktop – four columns
• Tablet – two columns
• Phone – one column and swap out regular menu for mobile hamburger menu

1. Start by adding the three most current breakpoints sizes to the Master Page.
   • Desktop – 1280px
   • Tablet – 760px
   • Phone – 320px
2. Switch to the individual pages and make page's content responsive (See Make Content Responsive). They will have their own breakpoints or media queries.