At Agira, Technology Simplified, Innovation Delivered, and Empowering Business is what we are passionate about. We always strive to build solutions that boost your productivity.

How to make your HTML responsive with CSS

  • By Gokulaselvan
  • February 25, 2020
  • 1558 Views

The trends in responsive design are going crazy! Every web application built today is responsive to diversified devices to be accessed by the end-users. As you are already here, you must have known the importance of Responsive HTML of a website or application.
We will be working in CSS, not in HTML. The HTML code remains the same, the CSS styles will present the HTML code in different layouts for mobiles, tablets, desktops. This is one of the major reasons to separate content from presentation. 
Nowadays, we have got many CSS frameworks to make our website responsive at ease. These frameworks use pure CSS to achieve the required level responsiveness. So, exposure with CSS for responsive design makes it easy to understand any CSS frameworks such as Bootstrap.
Let’s discuss how to make HTML content responsive to CSS styles.

What is Responsive?

responsive html
A web page design that adapts to different screen sizes is called ‘responsive’. A desktop layout cannot fit smaller screen sizes like mobile or tablets. In the early days, the desktop site as shown in the mobiles,  the user has to zoom in, scroll in X and Y direction to read the content on the webpage, which led to poor user experience. This is where a responsive design gives in.  The layouts are made to adapt to different screen sizes, making the website attractive and convenient for the user in different devices. 
Here well will focus on three areas in responsive design. 

  • Layouts
  • Images
  • Text

Media Queries

Media Query is provided by CSS to achieve the concept of responsiveness. This is a way to conditionally apply CSS rules.
The syntax goes like this,

@media (query) {
    // css rules
}

@media rule indicates the media query using which different styles can be applied based on media types, screen sizes, orientation.
Media queries can be used to specify certain media types such as screen, speech, print and certain media features such as min-width, max-width, min-height, max-height, orientation and more.
The CSS rules are defined by specifying a media type and media features only if those specified criteria are met with the CSS which was applied.

@media screen and (max-width: 768px) {
    .content {
        width: 100%;
    }
}

The above sample illustrates the element with class content, which will be applied with the style width 100% only when the type is a screen and the browser width is less than or equal to 768px.
To combine more than one media feature the not keyword is used.

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .content {
        width: 100%;
    }
 }

This example applies styles to the browser width 480px to 768px.
Separate stylesheets can be used for specific media query like,

<link rel="stylesheet" media="screen and (min-width: 960px)" href="largedevice.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="smalldevice.css">

Related: How To Host A Simple Static Website On AWS S3

Viewport

The viewport is the actual area in the rendering surface where the web page is displayed. The width or height constraint specified in the media query refers to the viewport width or height usually on the browser. 
To make an HTML page to be responsive, the viewport meta tag has to be included.

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

This sets the page width to device-width and initial zoom to 1. If the meta tag is not included the mobile or tablet will try to fit the desktop layout but, it might not fit properly.

Breakpoints

Breakpoints in CSS are the places where different styles are applied, specified in the media query. For example, up to 480px styles for mobile devices get applied at the breakpoint. A standard breakpoint cannot be provided for each device. But if you want to know the commonly used breakpoints you can navigate to this link.

Responsive Layout

The most important part of the responsive design is making the page layout align the best according to the screen size. For desktops, contents can be shown in three columns; for tablets two columns and for mobile devices laying out content in one column is preferred for better user experience.
There are different layouts that refer to design patterns such as fluid, column drop, layout shifter, tiny tweaks, off-canvas. To understand these layouts in details you can navigate to this link.
Fixed layout – Fixed width layout remains the same in all devices. The elements are fixed with absolute units such as pixels, inches, centimeters …
Fluid layout – Fluid layout stretches or shrinks with device width. The element’s properties are specified with relative units such as %, em, vw, vh …
Let’s take a look at the example of how media queries conditionally apply CSS styles. Here, the flexbox is used to create a responsive layout at ease.

Mobile-First Strategy

In a mobile-first strategy, a web page layout is created for small devices at first since there won’t be much work just stacking every element vertically. Then progress to medium devices and then to large-screen devices. This makes development easier and faster.

<div class="container">
 <div class="section1">Section 1</div>
 <div class="section2">Section 2</div>
 <div class="section3">Section 3</div>
</div>
.container {
 display: flex;
 flex-wrap: wrap;
}
.section1, .section2, .section3 {
 width: 100%;
 height: 215px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 22px;
 font-weight: 700;
}
.section1 {
 background: lightgreen;
}
.section2 {
 background: lightblue;
}
.section3 {
 background: lightsalmon;
}

mobile responsive Design
For medium devices,

@media only screen and (min-width: 481px) and (max-width: 768px) {
 .section1, .section2, .section3 {
   width: 50%;
   height: 320px;
 }
}

Medium size - responsive design
For large-screen devices,

@media only screen and (min-width: 769px) {
 .section1, .section2, .section3 {
   width: 33.3%;
   height: 350px;
 }
}

large - responsive design

Responsive Image

To make an image responsive, set width to 100% and height to auto. This will automatically resize the image based on the browser width.

<img src="micky.jpg" class="image">
.image {
     width: 100%;
     height: auto;
 }

Image - responsive design

Responsive Text

Responsive text can be achieved by using viewport units such as vw (viewport width), vh (viewport height), vmin, vmax. Viewport units indicate the browser’s viewport, 1vw = 1% of viewport width.

<div class="text">
Angular is a TypeScript-based open-source web application framework…
</div>
.text { font-size: 4vw; }

Text - responsive design

Also Read: How To Convert HTML To PDF Using Node.js?

EndNote

Making an HTML code responsive is no more arduous. With the help of CSS, anyone can fit the content on all the devices just as the native requires a proper understanding of the rendering surface. I hope this tutorial helps you understand the concept of responsive HTML and areas which are indispensable for real-time projects and expertise.  Have any questions? Leave it in the comments, we are happy to help. 
Don’t forget to subscribe to the weekly newsletter for exclusive updates on web development!
Looking to build a highly responsive web application? Discuss with our technical experts and get your requirements met on the time to market.

Turn your vision to magnificent reality With
Our Web and Mobile Solutions

Gokulaselvan

Gokulaselvan is a software developer. He is specializing in front end frameworks such as Angular, and React. He is a passionate techie with great fondness towards problem-solving in reactive programming. You can find him browsing and exploring different trends or either searching for easier ways to solve a problem. Gokul loves to share his new learning with others.