Website

How to Create Classes for a Responsive Website on a CSS File

Introduction

More and more users browse Internet using other devices and not desktop computers only. All these devices have very different screen sizes and if you want your website to be popular it should definitely be responsible. Responsible website means that according to the visitor screen size different classes of the stylesheet are loaded to look better on that size of a screen. To achieve this, media queries are used however the coding is pretty much the same as it is for a regular website. This tutorial explains how to force particular classes to be used according to the screen size.

What you’ll need

Before you begin this guide you’ll need the following:

  • Access to the server (to modify your HTML and CSS files)
  • Knowledge of CSS and HTML coding
  • Any code editor (it can be even a simple text editor)

Step 1 — Adding responsive design syntax to a CSS file

At this step, we need to access our CSS file(s). To do this you need to connect to the server on which files of a website are stored. Navigate to the directory where the CSS file is located and open it with any editor. There are all the classes of your website style. In this example, we will define a class which will only be loaded when the screen width of the device is 900px or less and it will change the class ‘.menu‘ width to 100% of the browser window size. A media query which allows that looks like this:

@media only screen and (max-device-width: 900px) {
/* .menu { width:100%; } */ 
}

Step 2 — Changing element properties

Usually, it’s not needed to change all the properties of classes because such values like background color, text color and similar are not changed. However, such properties like width, height or margins are changed almost all the time. Let’s explain the example which was used in Step 1. If our websites menu width was fixed and set to 900px a device which opens this website with a smaller screen size than 900px will have a horizontal scrollbar and not the whole website will be on the screen. It’s not comfortable to browse such a website and that’s the reason we rewrite the width of menu size to 100%. It means that whatever the screen size of a device is, the menu width will be exactly the same width as the width of the screen.

If we leave the menu width fixed to the pixels (in this example it’s 1200px) we have this view:

As you see in the picture above, we have a horizontal scrollbar on our browser and some parts of the menu are not displayed on the browser. We need to scroll to the right to see it.

This is how bbc.com website looks with a responsive menu which adapts to the width of the screen (browser window size):

 

The key point of this step is to change all widths and heights which can possibly be bigger than screen resolution (it’s necessary). It’s possible to set fixed width for the particular width of the screen (for example to set menu width to 600px if the screen size is 900px and to set menu width to 400px if menu size is 700px or smaller and so on) or to use percentage values.

Examples:

  • If screen size is 900px or smaller we set menu class width to 600px:
    @media only screen and (max-device-width: 900px) {
    /* .menu { width:600px; } */
    }
  • If screen size is 700px or smaller we set menu class width to 400px:
    @media only screen and (max-device-width: 700px) {
    /* .menu { width:400px; } */
    }

Step 3 — Testing changes on the browser

Now you can open your website on mobile or a tablet and check if changes appear on the screen. You could also try simply changing the
size of the browser on the normal desktop computer screen and check how changes appear when the window size is changing.

Conclusion

Media query is a really powerful tool which allows us to easily adapt any website to devices with different screen sizes. It’s really easy to learn as almost no new commands are needed to know, the same CSS syntax is used. Responsible web design is the most popular method to adapt a website as it’s easier than mobile web design which requires to load a completely different website when a website is visited using a mobile device.

About the author

Tautvydas V.

Tautvydas started his career as a technical support agent and now walks the path of full-stack development. He strives to produce top-notch features, improvements, and outstanding user experience with every line of code. In his free time, Tautvydas likes to travel and play old school video games.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More in Website
How to Link a Stylesheet (CSS) File to Your HTML File

Close