learning basics of web designing

How to make a HTML page responsive?

Hello friends, it’s the last lesson of this course. Hope you get the basic idea of web designing. In the last lesson, we learn about the responsive concept in web designing. In this chapter, we going to make our HTML page responsive. Curious, let’s get started.

Set The Viewport

We learned about the meta tag in the previous lesson, to make our HTML page responsive we have to add below tag in the head.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.

Make Images responsive

Images are the part that most need to make responsive. First, make me clear what exactly means by a responsive image. A responsive image always remains within the element in which it inclosed. See the below image.

In the above image, the image goes out to the is inclose div. To make an image always within the outer div/element, we should use below CSS.

A responsive image always in the same ratio as it in actual.

For example, if you are using an image which is rectangular in shape, means width and height are different, then it will always rectangular in all devices.

How to make an image responsive

img{
max-width:100%;
height: auto;
}

This will make the image’s max-width equal to the outer element’s width and the image will always remain within the outer div.

You can also use this CSS for any type of element. It will work for all.

Media Queries

This is the main part to make an HTML page responsive. With Media Queries, we can set CSS rule for elements that will work only for mentioned width. Just for example.

/* Use a media query to add a breakpoint at 480px: */
@media screen and (max-width: 480px) {
  .logo {
    max-width: 80%; /* The width is 80%, when the viewport is 480px or smaller */
text-align:center;

  }
}

This will apply only for the device that has screen-size up to 480px, generally mobile. That means on mobile .logo element’s max-width will be 80% of the screen size.

Please note that max-width will work only when an element have width more than the screen size. For example if page have an image whose width is 780px then it will adopt max-width that we mention in CSS rule.

There are many more rules to define screen sizes. Here is some example.

/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
//CSS
}

/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}

/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
//CSS
}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
//CSS
}

This is how you can make a Web-page responsive. Hope you get this.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. Can build a custom theme for your business.  I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

Free Bootstrap 4 Theme

Mega UI Advanced Material Design Blogging WordPress Theme

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.