Media Queries– Introduction

A media query is a line of code that allows your website to display a certain why on a device. The device could be mobile phone, laptop, printer, projector and more. This is done by using CSS (Cascading Style Sheets). The CSS on your website determines how it will look on different devices. Most templates for websites include this markup (code) already and additional coding might not be required.

How do I write media Queries?

Writing media queries can be difficult if you do not know how to write CSS but in this article I will go over the basics of writing one for a website created without a CMS and what you might want to include in it.

CSS (Cascading Style Sheets)

What you need to know about CSS is that it is “cascading”. This means that the website will load the sheet from top to bottom and anything after it that changes something will most of the time take precedence.

Getting Started

The first step is to figure out what aspects of your website need to be adjusted to fit a screen size. Another thing to consider is that you might be using a plugin that is not optimized for different devices, this may result a more challenging media query. In this post I am going to cover how to write basic queries for simple HTML and CSS based website. This guide will assume that you already know how to write basic HTML and CSS.

Writing the Query

  1. You start by finding the element of what you want to write the query for. In your code select an element you want to target. For example: the body. Then use that to focus it in the code.
  2. Start your code using:
    @media only
    If you are writing this for a desktop or mobile device the you would write:
    @media only screen and
  3. To target the resolution, you will use the width of your screen in pixels. You will write:
    @media only screen and (max-width: 600px)
    Max-width means that you are targeting anything larger than the pixel width you selected.
  4. After you write:
    @media only screen and (max-width: 600px)
    Add a curly bracket to start out your code.
    @media only screen and (max-width: 600px) {
  5. Target the element you want to change, for example: body.
    @media only screen and (max-width: 600px) {body: {width: 600px;}}
    Don’t forget to use double curly brackets to close your queries as that is used to open and close the code.

Adding the Query to your Website

Adding the query to your website will depend on what CMS (Content Management System) you are using. The example that I am going to describe is if you have a website you wrote using HTML, CSS or PHP. At the bottom of your CSS file copy paste the query that you wrote above and save your document. Preview your website and you should see that when the window is 600px or less that the element you targeted will change.

Questions?

If you have any questions about the post above, please visit the contact page. We will be happy to answer your questions about this topic!

For more information on CSS and Media Queries please visit “https://www.w3schools.com/css/css3_mediaqueries.asp”.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top