in ,

Create Simple Responsive design with CSS


Responsive web design is the need of modern web design. It makes your website flexible that can adopt the screen size of viewing device and keep website user friendly. I have also posted few free responsive WordPress themes that you can use to make your WordPress website responsive. But, As a web designer, you must learn how to create responsive web design. I also promised to posted series of responsive web design tutorials. Today, I am with a tutorial that will show how to create a basic responsive web design with CSS and media queries.

Please avoid the ugly look of the page. I just created few DIVs to show the web page alignment and its part and add some responsive CSS media queries.

Basic Responsive web design

HTML Part (Save it as index.html)

CSS Part (save it as style.css in the same directory with above html file)

This is the basic layout structure of the web page shown in the screenshot. You can clearly see that the width of the DIV parts is not given in the pixels. I used percentage to define the width.


Now add media queries to make this responsive.

Add above media queries CSS rules in the same CSS file. Now the layout is responsive. It will adjust the layout in the small screen devices. See the example below:

responsive design


You can see that side bar is now at the bottom of the main content part while it was at right side of the content part in the big screen devices. You can also make other element adjustments by using CSS media query rules and enhance the design.

In case of any problem, you can comment below


Written by Deepanker

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Leave a Reply

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


SImple Grid responsive WordPress

10 Free Responsive WordPress Themes

Google Drive Keyboard shortcuts

List of Google Drive Keyboard Shortcuts