Course Content

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

Course Content

Description

How to create a Website compatible with all devices in CSS3?

In previous video, we saw how to make header responsive. Now, we will see how to make responsive sections or how to make them device compatible. We will define width of section first -

wrap{width: 96%;}
.logo{ width:150px; height:75px;}
nav{ float: right; width: 130px;}
nav ul {margin-top: 0px;}
nav ul ui{display: block;}
section{width: 100%}

Refresh the browser and see, whole section will accommodate in 96%. Now, suppose you want to decrease the size of image presents in header, so for that type -

section img{ width: 50%;}

This will reduce the size of image. Also, to change the font size and color of text you can write -

h1{font-size: 13px;}
p{font-size: 13px;}

As shown in video, you can write h1 & p in same line for same property. Now, to show image in center position, define margin for it -

Section {width: 50%; margin: 0 auto; display: block;}

To display paragraph and header in center alignment -

h1, p{font-size: 13px; text-align: center;}

Same effect will apply in same defined class. Now to define space between sections -

section{width: 100%; margin-bottom: 15px;}

You will see, space is added between two sections. Also, notice margin bottom is applied in both the sections. Now to remove it from 2nd section -

section{width: 100%; margin-bottom: 15px;}
section: last-child{margin-bottom: 0px;}

Add one more section and check yourself, if margin-bottom is applied to middle section or not. You have to remember margin query we have learned in CSS3 so that you can design responsive website better. So, this style will display properly between 320px to 480px.

As you go beyond the 480px, structure of website will disturb. But, if you again define more class for same as shown in video, it will become responsive. Here, second media query is defined for 481 to 767px. This way, you can create responsiveness based on media query.

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