Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content

Description

How To Create Responsive Website In CSS3?

What is responsive? As it name suggests, to give back answer to any query or to give response. Website should be responsive in mobile, tablet as well as on desktop. To make a website responsive, what we need? First thing is to fix viewport of it. Now what is view port? Viewport means zoom level of site. Then we will set element in viewport that how our website will look in mobile. Let’s see how to make a responsive website using viewport.

To define a viewport, first we have to write a meta script which we can tell browser that this is based on viewport.
<meta name= “viewport” content= “width=device-width, initial-scale=1”>

Suppose assume desktop element size is 1200px and mobile are of 320px generally. Now, we can’t fix anything in 320px which is of 1200px. For that, we will write media query. Let’s see how to write media query in CSS :
@media only screen and (min-width: 320px) and (max-width: 480px) {
}

Firefox and chrome both provide compatibility to check responsiveness. Like, in Firefox, pressing CTRL+SHIFT+M it will allow you define mobile width. Set media query as per your choice, here we have taken it as 320x480. Right click on that screen and go to inspect element. It will show that portion is for logo defining. Now, we will go to CSS and define appropriate width for it :
@media only screen and (min-width: 320px) and (max-width: 480px) {
.logo{width:150px; height:75px;}
}

You can see in browser, your changes to style are over write. So, we changed the height and width of logo based on media query. This way, you can make a responsive website in CSS3.

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere