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? We will walk through 2 different ways to create responsive squares and rectangles in this guide, read on to find out!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Section A | Section B | Section C |
Extra | Closing |
SECTION A
FIXED DIMENSIONS
Before we go into the responsive solutions, here is how we will do it traditionally with fixed dimensions… This is not to troll you guys, but to raise a certain point about the contents you may put within the boxes.
THE SCRIPT
CSS Fixed Square Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer mollis sapien sit amet odio luctus, vel mattis tortor fringilla.
Praesent semper vehicula ante, quis blandit mi tristique eu. Sed vitae vehicula purus.
THE RESULT
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer mollis sapien sit amet odio luctus, vel mattis tortor fringilla.
OVERFLOW PROBLEM
As you can see, the text within the box “spilled out” of the boundaries, and this is something that you have to be extra careful about – This same problem will also happen in responsive boxes regardless.
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. So, you decide which is the best way.
SECTION B
VIEWPORT RELATIVE
Now that you know the overflow issue, here is the simple way to create a responsive square or rectangle – By using the slightly more modern CSS viewport unit.
THE SCRIPT
CSS Responsive Square and Rectangle Demo
Rectangle
Square
THE RESULT
Go ahead, resize the window to see the shapes resize themselves.
THE EXPLANATION
So just what kind of sorcery is that!?
vwis a relative unit to the viewport width.vhis a relative unit to the viewport height.- So when we define
width: 20vwandheight: 20vwto a container, it will have a width and height that is 20% of the viewport, effectively making it a square. - Similarly, we can use a varying
vwandvhto 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.
SECTION C
ASPECT RATIO
Finally, this is a “traditional” CSS trick that is used to maintain the aspect ratio of a container. Use this method if you have to support the old browsers.
THE SCRIPT
CSS Responsive Square and Rectangle Demo
Rectangle
Square
THE RESULT
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
:beforepsuedo class on the container, setting it to display as block, giving it empty contents, and a percentage top padding. - The percentage
padding-topproperty 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
DOWNLOAD & MORE
That’s all for the code, and here is the download link as promised.
SOURCE 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.
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 in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
The post 2 Ways to Create Responsive CSS Squares and Rectangles appeared first on Code Boxx.
