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

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

  • ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!

Pin It on Pinterest

Share This

Share This

Share this post with your friends!