Creating a design with media queries

June 21, 2016 · 1 mins read
Categories: Six weeks training |

Media queries are used to tell the browser about the various breaking points in the website so that we can give a different css styling for all those breaking points. This type of CSS is used to make the website responsive. Breaking points are the widths at which the design breaks or is damaged.

This is the working link of the website. Go and visit this website. Although the colors used in the website are not that great but they are sufficient to explain the features. Bootstrap is not added but still the code is written in the format that if anytime in the future we need anything like this we need not to change anything. Everything will be working on it’s own.(By making only some changes)

http://singh1114.github.io/websitedesigns/occupation-design/occ.html

There is one more design that was created a long time ago using the same procedure. A lot of time was spent on this one so as far from my side their is no bad in this one.

http://singh1114.github.io/websitedesigns/design1/websitedesign1.html

Media queries Syntax:

> > @media only screen and (max-width:700px){ > > } > > >
To find more check the CSS code for this page at:

http://singh1114.github.io/websitedesigns/occupation-design/occ.css

There is one more thing that I want to share that Bootstrap provide us easier way for solving the responsiveness problem. So It will be better option to spent some time in learning bootstrap. Still If you want to know the real procedure then this topic is worth exploring.

Also I want to discuss one of the format used in this code for specifying height i.e. vh.

vh stands for View-port Height and it gives the height of the browser that you use. Therefore 100vh is the full height and it is decreased from that value.

Also there is vw which is View-port Width.

Still confused, drop a comment and I will be very happy to solve your problem.

Please share your Feedback:

Did you enjoy reading or think it can be improved? Don’t forget to leave your thoughts in the comments section below! If you liked this article, please share it with your friends, and read a few more!

We don't share your details with others