DEV Community

Justin Stout
Justin Stout

Posted on • Updated on

My RWD project 2/5

I am happy to announce that my Survey Form project for FreeCodeCamp is published and ready for review, comments and criticisms at the following link:

https://codepen.io/jspiderhand/pen/f7c76a845945cfbba6fdea0353bf317e

While I was working on this project, I came across a problem that perplexed me. My check-boxes would not maintain their square shape as the view-port (mainly width) got smaller. Instead, they would look more like a vertical rectangle. Pretty frustrating! After playing with around with %'s and view-port units to set height and width (using calc didn't seem to work either), I Google searched for a solution and came across this article:

https://spin.atomicobject.com/2015/07/14/css-responsive-square/

In the article, there is a section about using the :after pseudo-element that got my attention. This was the css code:

.square {
width: 50%;
}

.square:after {
content: "";
display: block;
padding-bottom: 100%;
}

Ok, cool! The live demo showed the above code worked really well, but I needed to change it to fit the issue I was trying to solve. I tried the following code:

input[type=checkbox]:checked:after + label {
content: "";
display: block;
padding-bottom: 100%;
}

As you can imagine, that didn’t work. However after reviewing the code, it occured to me to use the ‘padding’ in the css for the checkbox itself. I started with the 'padding-bottom', but didn't get the result I was looking for till I applied the shorthand 'padding', removed 'height' and 'width' and, viola! The result I was looking for! The final css code looks like this:

input[type=checkbox] + label {
display: inline-block;
padding: 1.4%;
border: 1px solid black;
background-color: white;
margin: 0;
vertical-align: middle;
cursor: pointer;
}

Now the checkboxes maintain the same shape relative the viewport width/height.
Pretty cool if you ask me!

Feel free to use 'padding' with px, %, vw or vh on your checkboxes and see how the results look to you.

Added bonus: I experimented with using vh with font sizes and found myself pleased with the results, but try it for yourself and see how it works out for you.

Happy coding!

Discussion (0)