It is quite common to browse the internet on your smartphone or other handheld devices. Due to this, it is important to ensure that your website is “responsive.” A responsive website is a website that adapts to the different screen sizes it is being viewed on. This is important for many reasons which include accessibility, user engagement, and consumption.
The three things will be covering are:
1. Including a viewport in your head tag (HTML)
2. Including media queries for tablet size screens (CSS)
3. Including media queries for mobile (CSS)
Including the viewport:
Let’s first discuss the importance of designing your website layouts. Designing the layouts before you actually start your code will give you an upper hand. Designing for mobile first will give you an even larger advantage as some developers believe that it is easier to code smaller screens first (“mobile-first”) and then go back and code the larger screens. Tools like Sketch or Figma are helpful in creating your design. Once you know what you will be trying to build then you can start writing your code.
The viewport is an area on a screen that is displayed to the viewer. You want your website to fit within the screen it is being viewed on. Nesting the meta viewport tag within the head tag of your HTML will make your media queries functional.
Setting media queries is what allows you to use CSS to adapt your design to fit the identified screen sizes. There are two options to consider when placing your media queries in your code. Placing them as they occur in your CSS code or placing them in one big chunk at the top or bottom of your CSS code. There are several sizes you can use to work with when setting media queries. To keep it simple we will work with two general breakpoints; tablet and mobile. If you are using a framework, you will want to be careful to tailor your code to that specific framework.
Let’s set this media query breakpoint at a max-width of 1000px. When max-width is used, the CSS will only be applied when the width of the device is the specified size (px) or less. Use min-width and the CSS will be applied when the width of the device is the specified size (px) or greater.
You will nest your code for that breakpoint within the media query. Let’s set the media query breakpoint for mobile at 670px.
Check your work:
Below you will see the color of the text change according to the screen size breakpoint.
*Note: I made the background color a hideous green so you can see the color change and screen size.
Large Screen Sizes (1000px and over) *Note: There is no font color change.
Tablet Screen Sizes (1000px)
Mobile Screen Sizes (670px)
If you see that your changes are being impacted by the screen size. Give yourself a pat on the back! You did it!
Great job using basic media queries to make your website responsive. To make your website responsive for mobile and tablet remember to:
1. Include your viewport in the head tag of your HTML.
2. Set media query breakpoint of tablet in CSS.
3. Set media query breakpoint of mobile in CSS.
Here are other helpful resources for making a page responsive:
Stephanie McInelly is an aspiring front-end web developer. Who is interested in using her understanding of human connection to create meaningful work.
Stephanie’s fascination with technology began during her work in tele-health. Where she has worked remotely. Stephanie is looking forward to apply her experience and new skills to the tech industry.
Stephanie has graduated from Pacific Lutheran University with a Master of Arts in Marriage and Family Therapy. Recently, Stephanie has completed Moms Can & Co's Moms Can Code School training program and is working to build her coding skills and set out into the tech field.