Responsive Web Design Using CSS3 | Brain Mentors Skip to content

Responsive Web Design Using CSS3

CSS Introduction

CSS is one of the most wonderful web technology ever created. CSS is the core part of UI (User Interface) because without CSS no one is going to spend a single minute on your website. You have a lot of awesome technologies today to develop a website but there is only one technology that is used to design your web pages and that is CSS.

Website with CSS

Website without CSS

Now what exactly a responsive web design is ?

Imagine you built a website on your laptop and your laptop screen resolution is something like 1200 x 768 or anything else, now you want this website to go live and you shared the live URL of your website to people. Are they going to open your website on laptops or desktops only…?
I don’t think so because they are going to open your website on mobile or tab or whatever device they are using at that moment. Now what will happen you can just imagine because if you built a website on a different resolution with different margins and paddings that you adjusted specifically according to your system then your website will be completely destroyed on other devices.
Now you might wonder that how you are going to test your website on these devices, are you going to purchase all of them. Nope, you just have to thanks google chrome or firefox for that because they can show you how to check your website on different screen resolutions. Just follow these steps :

1. Open your website on chrome or any other browser and right click to open inspect element window or press f12

2. Now click on toggle device toolbar and it will open your webpage like this :

Now you can see in this image that you can check your website on different resolutions. And on the top you can see a responsive dropdown which will open a list of various devices like this :

Now you can check your website on any of the device or you can insert your specific device using edit option.
So now let’s talk about, RWD i.e., Responsive Web Design. Whenever you hear the term responsive just think of this image :

Here in this image we have different devices with different size or screen width. So whenever you are going to build a website just remember that your website could be open on any device with any screen resolution. You have to test your website on Mobile Phones, Tabs, IPads, Notebooks, Laptops, Desktops etc.
Your website should adjust itself like in the image you saw above when a user opens it on any platform or any device.

Now let’s learn to build a responsive website

The very first thing you should know about is different resolutions and device width. Like there are lot of different brands of mobile phones, tabs and laptops today and each and every brand has a different resolution and screen size. So how you are going to manage all the resolutions and devices.

Responsive Breakpoints

Basically we don’t have to write code for each and every device, there are few major resolutions that you should focus on. Responsive breakpoints are the points on which you want your website to adapt the changes that you have provided in your CSS.

Don’t Just add breakpoints

Yes, don’t just add breakpoint anywhere you feel your website is not working fine or getting sections overlapped on broken. Because if you have a team of 5 developers working on a website and each one of your developer is working on a different page. Now each page has a different design and when they resize the website each page will collapse at a different breakpoint. So each one will try to write there own CSS for each breakpoint they feel so.
Now at the end what’s going to happen is your CSS will become too large and messy with a lot of breakpoints.

At first consider these major breakpoints :

above 1200 px = Extra Large Devices (Desktop)
below 1200 px & above 992 px = Large Devices (Laptop)
below 992 px & above 768 px = Medium Devices (Tab)
below 768 px = Small Devices (Mobile Phone)

Now at first follow these breakpoints and after that if you want that there is still some requirement to add more breakpoints for portrait or landscape mode then you can also go for :

  • 1024px
  • 640px
  • 576px
  • 480px

So finally you know that what are the major breakpoints, Now we will learn how to implement them using CSS Media Queries

Introduction to Media Queries

Media queries are nothing, they are just like simple If Else. They include breakpoints and check if website is being open on that resolution then what CSS will be executed. Using CSS media queries you can customize look and feel of your website for a specific range like for desktop, laptops, tablets or mobile phones. 
Media queries are helpful when you want to modify your web app depending on device’s general type (such as print vs screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Syntax of Media Queries :

Syntax of media query is consist of an optional media type and a number of media feature expression. You can implement multiple media queries as well by using logical operators.

Media Types :

Media types tells the category of a device.

  • all – suitable for all devices
  • Print – Intended for paged material and documents viewed on a screen in print preview mode
  • Screen – Intended primarily for screens
  • Speech – Intended for speech synthesizers

And there are 4 operators which can be included in media query syntax :

  • and
  • Only
  • Not
  • Comma

    You can use max width or min width as well.

    Creating complex and multiple media queries

    Still there are lot of media features that we can talk about like any-hover, any-pointer, color, grid, height, monochrome etc. 

    Now let’s see one example :

    Sign Up and Start Learning