2 Ways to Create Responsive CSS Squares and Rectangles

INTRODUCTION

NOT SO EASY?

Welcome to a tutorial on how to create responsive CSS squares and rectangles. It is easy to create a fixed dimension shape with HTML and CSS, but when it comes to the responsive ones, they are really not that straightforward… Or is it?

An easy way to create a responsive rectangle in CSS is to define the width and height relative to the viewport – <div style=”width:50vw; height:20vh”></div>. But if you need more examples – Read on to find out!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

 

SECTION A

DOWNLOAD & NOTES

That’s all for the code, and here is the download link as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

SECTION B

RESPONSIVE SQUARES & RECTANGLES

All right, let us now go through the ways to create responsive squares & rectangles using pure CSS only.

 

METHOD 1) VIEWPORT RELATIVE

HTML & CSS

1-viewport.html
<style>
#recA {
  background: #cefff9;
  width: 50vw;
  height: 20vh;
}
#squareA {
  background: #ffe3ce;
  width: 20vw;
  height: 20vw;
}
</style>
  
<div id="recA">
  Rectangle
</div>
<div id="squareA">
  Square
</div>

 

THE RESULT

Go ahead, resize the window to see the shapes resize themselves.

Rectangle
Square

 

THE EXPLANATION

So just what kind of sorcery is that!?

  • vw is a relative unit to the viewport width.
  • vh is a relative unit to the viewport height.
  • So when we define width: 20vw and height: 20vw to a container, it will have a width and height that is 20% of the viewport, effectively making it a square.
  • Similarly, we can use varying vw and vh to create a rectangle.

That simple.

 

NOT BACKWARD COMPATIBLE

As convenient as this method is, please take note that the ancient browsers do not understand the vw and vh units. If you have to support ancient technology, then you will have to use the aspect ratio method below.

 

 

METHOD 2) ASPECT RATIO TRICK

HTML & CSS

2-aspect.html
<style>
#recB {
  background: #eed3ff;
  width: 100%;
}
 #recB:before {
  content: "";
  display: block;
  padding-top: 25%;
}
#squareB {
  background: #d3ffee;
  width: 30%;
}
#squareB:before {
  content: "";
  display: block;
  padding-top: 100%;
}
</style>
 
<div id="recB">
  Rectangle
</div>
<div id="squareB">
  Square
</div>

 

THE RESULT

Rectangle
Square

 

HOW IT WORKS

  • We first establish the width of the rectangle (or square) by giving it a percentage width.
  • The magic actually happens when we define the :before psuedo class on the container, setting it to display as block, giving it empty contents, and a percentage top padding.
  • The percentage padding-top property will be calculated relative to the width of the container; It is the one that controls the height and aspect ratio of the rectangle/square.
  • In the above example, we have a 25% top padding on the rectangle. That will mean it has a height that is 25% of the width, with an aspect ratio of 4:1.
  • For squares, we have to give the container a 100% top padding. Meaning, the height is equal to the width – Effectively a square, that is.

 

 

EXTRA

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

THE OVERFLOW PROBLEM

3-fixed.html
<style>
#squareC {
  background: #fff0b7;
  width: 200px;
  height: 200px;
  font-size: 18px;
}
</style>
 
<div id="squareC">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </p>
  <p>
    Integer mollis sapien sit amet odio luctus, vel mattis tortor fringilla.
  </p>
  <p>
    Praesent semper vehicula ante, quis blandit mi tristique eu. Sed vitae vehicula purus.
  </p>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer mollis sapien sit amet odio luctus, vel mattis tortor fringilla.

 

So… What has a fixed dimension square/rectangle got to do with this tutorial? Well, this is not to troll you guys, but to raise a point – As you can see, the text within the box “spilled out” of the boundaries. This is something that you have to be extra careful about, as the same problem will also exist in responsive boxes.

One way to prevent this “spilling out” is to add an overflow:auto attribute to the box, but that will result in an ugly scrollbar. The other way is to add overflow:hidden which will cut the text off instead. You decide which is the better way.

 

CENTERING TEXT

4-center-text.html
<style>
#recTxt {
  background: #eed3ff;
  width: 100%;
  text-align: center;
}
#recTxt:before, #recTxt:after {
  content: "";
  display: block;
  padding-top: 10%;
}
#squareTxt {
  background: #d3ffee;
  width: 30%;
  text-align: center;
}
#squareTxt:before, #squareTxt:after{
  content: "";
  display: block;
  padding-top: 50%;
}
</style>
 
<div id="recTxt">
  Rectangle
</div>
<div id="squareTxt">
  Square
</div>
Rectangle
Square

 

  • To center the text horizontally, we simply use text-align: center.
  • But the vertical centering requires a little bit more work – The responsiveness part of the shapes works the same way as above, but we now add the same amount of padding to both :before and :after – That will do the trick.

 

 

LINKS & REFERENCES

 

CHEAT SHEET

Responsive CSS Squares Rectangles (Click To Enlarge)

 

CLOSING

WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *