Make Any Webpage Responsive [A How-To Guide]

After a few weeks at Microverse, I was given a project to work on. I hoped on it expecting that it would be as simple as the first projects I had worked on as I learned. It was about responsive web design, a new topic I had never done before since I am a beginner in software development.

This was the beginning of making the page look good in any given screen size. So my journey in Responsive web design began:

What is a responsive web design?

This is the first question that would come to anyone’s mind when they encounter a new thing.

Responsive web design is the use of HTML/CSS to have a good design or layout in any screen size either by shrinking, enlarging, shrinking, hiding or moving its contents.

Do you ever realize that when you open most sites the design outlay looks good despite the screen size you are using? Try it with your Twitter or Instagram accounts and check it out. And just like that, that is what responsiveness is. But how do we make a page responsive?

How to achieve web page responsiveness

There are several ways to make the web page responsive, these include:

1. Use of Media queries

A media query is a CSS feature used to create new rules or overwrite existing rules for the web page contents styling in various screen sizes. The rules can be written in a different file and a link attached to the head tag to link the HTML file to the file with media queries. This can be done this link:

<link rel=”stylesheet” type=”text/CSS” media=”screen 
and (max-device-width: 480px)” href=”style.css” />

Media queries can as well be written in the main CSS file. Since CSS follows the order made in styling, it is always wise to write the media queries below the main styling you have.

So how are they written? Here are a few examples of ways to write media queries:

@media only screen and (min-width: 768px) and (max-width: 1200px) {
.home-page {
   padding: 2.5em;
   font-size: 1em;
   width: 100%;
}
.featured-speakers {
   width: 100%;
   font-size: smaller;
   grid-template-columns:auto auto;
}
}

The styling above will be applied when the screen has a width of 768px and 1200px, but on the other screen sizes, it applies the style given.

@media screen and print (max-width: 576px) {
.main-page {
   display: flex;
   flex-direction: column;
}
footer {
   background-color: red;
   color: #fff
}
}

With the above media query, the style in it is applied to a maximum width of 576px both on-screen and print

@media only screen and (orientation: landscape;){
  .home-page {
     font-size: 2em;
     color: #fff;
  }
}

With the orientation, the style in the media query is applied in the given orientation, either portrait or landscape.

2. Using CSS grids and flexboxes

CSS grid and flexbox are used in CSS to determine how elements are positioned on a webpage screen. Using either of the two enables content to be spread across the width of a screen. An example of flexbox is:

.home-page {
    display: flex; 
    justify-content: space- 
     between; 
  }

With this, despite the screen size, the content will fill the page with some space between each of them.

An example of a grid would be:

.home-page{
dispay: grid; 
grid-template-column: auto auto;}

This gives chance to the content to fill the page with two columns in each screen size.

3. Using responsive units of measurement

After spending a few months learning web development, I came across several CSS units and my curiosity drove to me to make research on the right CSS unit to use for a responsive design. A list of responsive units to use include:

1. rem (root ephemeral measurement): Relative to font-size of the root element. It is roughly 16px but can change depending on the device screen size.
2. em (ephemeral measurement): Relative to the font-size of the element (2em means 2 times the size of the current font. ). em can be calculated as follows: 1em = 16px = 1 * 16px; 1.5em = 24px = 1.5 * 16px
3. VW (viewport width): viewport width is simply the size of the browser window width. If you set the width to 20vw, then the contents will take 20% of the browser window’s width.
4. Vh (viewport height): viewport height is simply the browser window’s height. If you set the height to 100vh, it simply means that the content will cover the whole height of the browser.
5. percentages: Another idea is using percentages for any sizes instead of fixed sizes. This will take the percentage of the screen width or height.
6. Using auto-properties is another method. Instead of giving is specific sizes auto enables the contents to cover the width the contents can fill.

We can use the measurements to set the sizes of everything responsively including font-size.

*You can read more of this at W3Schools.

4. Using frameworks:

 Frameworks such as the bootstrap make responsiveness effective. Bootstrap uses the grid system in that it can tell how many columns should be applied in various screen sizes from the extra-large to the extra small screens. This styling is applied in HTML through bootstrap classes. 

Congratulations! You too can make your website beautiful in any screen size by trying any of the tips above! All the best!