DEV Community

Eyitayo Itunu Babatope
Eyitayo Itunu Babatope

Posted on

Responsive Web Design Hack

Sometimes ago, I came across a post on the web that says " If you have to write many media queries and CSS to create a responsive web pages, then the design is faulty." I agree with this principle. With few lines of CSS, you can create responsive web pages adaptable to any device using CSS flex and common tricks. In this post, the reader will learn how to create responsive web pages with fewer lines of CSS code. This post assumes the reader knows the basic of CSS and CSS flex

Table of Content

  1. Introduction
  2. Relative Units
  3. Responsive design & CSS Flex box layout
  4. Conclusion

Introduction

Responsive web pages target the width of the device and not the height. It is natural to scroll up a web page but unnatural to scroll side ways. Scrolling sideways leads to poor user experience. So the hack of responsive web pages is to focus on the width of the html elements and make it adapt to the width of any device.

The first step in developing responsive web pages with few CSS code and media query is to start with mobile version first. A developer might be tempted to start with the desktop version because of the development environment, such as laptop and desktop. Later on, the developer writes media query to adapt to mobile devices. Experience have shown that this is a tedious process. So remember mobile first.

The second is to set the device viewport in the html head.

<head>
<meta name='viewport' content='width=device-width,intial-scale=1.0' >
</head>
Enter fullscreen mode Exit fullscreen mode

The above will control dimension and scale of the web page read more about viewporthere

Relative Unit

One major hack of responsive web design is to use relative unit for the width of the element instead of fixed unit. Remember, responsive design is about the width of the device. Relative unit scale very well. Fixed unit don't change. Example of fixed unit are
-px
-cm
-pt etc.

relative unit are
-rem
-em
-%
-vh
-vw etc.
Read more about relative unit.

rem unit are relative to the font size of the root html while em are relative to the font size of the nearest parent element. rem provides better control than em.

html{
font-size:16px;
}
Enter fullscreen mode Exit fullscreen mode

2rem= 32px

Another hack is to set the width of images and form elements such as input, button in percentages. The elements will scale nicely on any device.

img{
  width:100%; 
height:10rem; /* 160px */
}

input{
 width: 60%;
}
button{
 width:30%;
}
Enter fullscreen mode Exit fullscreen mode

CSS flex box layout has made responsive web design easy. On mobile version set your flex box direction to column. All the element in the flex container will be displayed stacked on one another. On larger devices, you can set the flex direction to row, to display element side by side.

Mobile version

div{
 display:flex;
flex-direction:column;
width:100%;

}

@media screen and (min-width:1000px){

div{
  display:flex;
flex-direction:row;
}


}

Enter fullscreen mode Exit fullscreen mode

Another hack is to set the flex-flow property of the flex box to row wrap. The element inside the flex box will stack on one another or flow side by side depending on the width of the element.

div{
  display:flex;
flex-flow: row wrap;

}
Enter fullscreen mode Exit fullscreen mode

Conclusion

It is most likely that your web page will be viewed on mobile device. In November 2022, about 50 percent of internet traffic came from a mobile device. This figure will continue to rise. Hence, it is imperative to develop a website that will adapt to most devices. The objective of this post is to enable developers to design responsive web page with ease.

If you find this post educative, comment and like.

Top comments (0)