How to make responsive squares in CSS

I’m struggling to implement a responsive design. Currently, I’m using a fixed height div to contain my 'badges. I’d like to have the height scale to match the width of the badge divs

So the hover state will appear as circles not ovals regardless of the width of the screen. I’ve seen some answers to similar questions where people have used padding-top and a percentage but I can’t seem to get it to work in this use case.

Any help would be most appreciated.

.badge {
  height: 250px;
  padding: 0px;
}


.badge-content {
  height:100%;
  transform-style: preserve-3d;
}

If you do that then your wrapping content will no longer fit within the square shape.

You are correct in that the padding method can create an intrinsic ratio between height and width but that means that if the width is only 100px wide then the height is also only 100px wide no matter what space your content may need.

What you actually need is for the width of the container to increase in relation to the height of the element. However this will result in quite wide squares where your content has wrapped to multiple lines. You have no constant relationship between the height of the text content and the width of the element so I don;t believe you can achieve this without scripting.

Your best bet is just to use a fixed width and height for those boxes because a scale-able square is not what the content needs.

3 Likes

Hi there j00l,

this works OK until the page width is about 50em when the text gets rather small…

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>badges</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    margin: 0;
    font: 1em/1.62em verdana, arial, helvetic, sans serif;
 }
h1 {
    color: #4d4d4d;
    text-align: center;
 }
#badges {
    padding: 0 ;
    margin: 0;
    list-style: none;
 }
#badges li {
    float: left;
    width: 20vw;
 }
#badges div {
    width: 18vw;
    height: 18vw;
    padding: 0.5vw;
    margin: 0 0.5vw;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 0.125em 0.25em 0 rgba(0,0,0,0.5);
 }
#badges  img {   
    display: block;
    width: 45%;
    padding-bottom: 20%;
    height: auto;
    margin: auto;
 }
#badges h2 {
    margin:0;
    line-height: 0.5em;
    color: #4d4d4d;
    text-align: center;
 }
#badges h2::before {
    display: block;
    content:'RELIGIOUS ACTIVITES';
    font-size: 1.1vw;
 }
#badges h2::after {
    display: block;
    padding: 0 2vw;
    line-height: 1em;
    content:' Foundation';
    font-size: 1vw;
 }
#badges a {
    text-decoration:none;
 }
#badges li:hover h2::before {
    line-height: 1.62em;
    content:' FOUNDATION';
 }
#badges li:hover h2::after {
    content:'';
 }
#badges li:hover  div {
    animation: swop 0.5s;
}
@keyframes swop {
    0%   { transform:  scale(1);}
   50%   { transform:  scale(0);}
  100%   { transform:  scale(1); }
 }
</style>

</head>
<body> 
<h1>Badges</h1>
<ul id="badges">
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
</ul>  
</body>
</html>

What would you like to do when that point is reached?

Reducing the number of badges at various widths would be my suggestion. :winky:

coothead

2 Likes

Good example :slight_smile:

Yes, I also originally tried a version with scaling the font-size with vw units but decided that the text was either too small too read on smaller screens or too large on wider screens. However, I don’t think I had scaled the image as small as your example to start with as your example doesn’t look too bad.:wink:

1 Like

Hi,
I started to fix your CodePen to achieve the round circles in all widths.

That was soon done, but as your “Bulma” grid system sized the circles according to viewport width I had to put in some css to handle the vertical aligning.

Then you can, if you like, make the badges resize their content according to the circle size and give the whole badges a zooming effect and not just the circles. :slight_smile:

Here is the mended css from your posted Codepen when I was done:

@import "../node_modules/bulma/css/bulma.css"; */

.notification {
  background-color: grey;
}
h3 {
  font-family: Futura-Medium;
  font-size: 16px;
  color: #4D4D4D;
}
h4 {
  padding-top: 15px;
  font-family: Georgia;
  font-size: 14px;
  color: #4D4D4D;
  letter-spacing: 0;
}
.badge  h4 { /* added specificity to get the padding */
  padding-top: 15px;
}

/* Badge   */

.badge { /* added position padding and height */
  position: relative;
  padding-top: 100%;
  width: 100%;
  height: 0;
}
.badge-content { /* added position and coordinates */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
}
.badge-front,
.badge-back {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border:0;
  padding: 0;
  backface-visibility: hidden;
}
.badge-front a,
.badge-back a{ /* new ruleblock to align the ncontent */
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
div.badge img { /* added margin-top to restore top distance */
  margin-top: -20%;
  padding: 1.5rem 0 1.5rem 0;
  width: auto;
  height: 128px;
}

/* Badge filp */

.badge-content > .badge-front,
.badge-content > .badge-back {
  transition: transform 1s;
}
.badge:hover .badge-content > .badge-front {
  transform:  scale(0) ;
  transition: transform 0.5s;
}
.badge:hover .badge-content > .badge-back {
  /* transform: rotateY( 180deg ); */
  transform: scale(1) ;
  transition: transform 0.5s;
}
.badge-front {
  transform: scale(1);
  /* transform: rotateY( 180deg );*/
}
.badge-back {
  transform: scale(0);
  /* transform: rotateY( 180deg );*/
}
.circle {
  border: 0px solid black;
  border-radius: 100%;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
}

@coothead and @PaulOB have already tested scaling the badges’ content.
(And I could happily get away with not reinventing the wheel here.) :grinning:

3 Likes

Hi there j00l,

This example, as per my suggestion, removes
badges as the page decreases in width…

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>badges</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    margin: 0;
    font: 1em/1.62em verdana, arial, helvetic, sans serif;
 }
h1 {
    color: #8d8d8d;
    text-align: center;
 }
#badges {
    padding: 0 ;
    margin: 0;
    list-style: none;
 }
#badges li {
    float: left;
    width: 20%;
    border-radius: 50%;
    overflow: hidden;
 }
#badges div {
    width: 19vw;
    height: 19vw;
    margin: 0 auto;
    border: 0.125em solid #eee;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow:inset -0.3em -0.3em 0.3em #ccc;
 }
#badges  img {   
    display: block;
    width: 45%;
    padding-bottom: 20%;
    height: auto;
    margin: auto;
 }
#badges h2 {
    margin: 0;
    line-height: 0.5em;
    color: #6d6d6d;
    text-align: center;
 }
#badges h2::before {
    display: block;
    content: 'RELIGIOUS ACTIVITES';
    font-size: 1.2vw;
 }
#badges h2::after {
    display:  block;
    padding: 0 2vw;
    line-height: 1.1em;
    content: ' Foundation';
    font-size: 1.1vw;
 }
#badges a {
    display: block;
    height: 100%;
    padding: 0.5vw;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
 }

#badges li:hover h2::before {
    line-height: 1.62em;
    content:'FOUNDATION';
 }
#badges li:hover h2::after {
    content:'';
 }

#badges li:hover div {
    animation: swop 0.5s;
}
@keyframes swop {
    0%   { transform:  scale(1); }
   50%   { transform:  scale(0); }
  100%   { transform:  scale(1); }
 }
@media screen and ( max-width:65em) {
#badges li {
    width: 25%;
  }
#badges div {
    width: 23vw;
    height: 23vw;
  }
#badges li:nth-of-type(5){
    display: none;
  }
#badges h2::before {
    font-size: 1.5vw;
 }
#badges h2::after {
    font-size: 1.4vw;
  }
 }
@media screen and ( max-width:50em) {
#badges li {
    width: 33.333%;
  }
#badges div {
    width: 30.333vw;
    height: 30.33vw;
  }
#badges li:nth-of-type(4){
    display: none;
  }
#badges h2::before {
    font-size: 2vw;
 }
#badges h2::after {
    font-size: 1.9vw;
  }
 }
@media screen and ( max-width:37.5em) {
#badges li {
    width: 50%;
  }
#badges div {
    width: 46vw;
    height: 46vw;

  }
#badges li:nth-of-type(3){
    display: none;
  }
#badges h2::before {
    font-size: 3vw;
 }
#badges h2::after {
    font-size: 2.9vw;
  }
 }
@media screen and ( max-width:25em) {
#badges li {
    width: 100%;
  }
#badges div {
    width: 90vw;
    height: 90vw;
  }
#badges li:nth-of-type(2){
    display: none;
  }
#badges h2::before {
    font-size: 5.6vw;
 }
#badges h2::after {
    font-size: 5.5vw;
  }
 }
</style>

</head>
<body> 
<h1>Badges</h1>
<ul id="badges">
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
 <li>
  <div>
   <a href="#">
    <img src="CLF2.afa1f03.png" alt="">
     <h2>&nbsp;</h2>
    </a>
   </div>
 </li>
</ul>  
</body>
</html>

coothead

2 Likes

Ok, then I tried to do it anyway. :slight_smile:

A combination of font-size in vw and % and em controlling content and min-size with only two media queries:

Responsive-Squares.html (5.4 KB)

5 Likes

Thanks everyone for your valuable replies.

Spent all day reviewing the various solutions and trying to implement in my design.
The final one by @Erik_J is closest to what I’m looking for.

Still struggling to get the layout working exactly as required.
I will post an update if and when I manage to make some progress!

3 Likes

Ok, thanks again all for your help.

I’m nearly there with this. I’m struggling still with a couple of things.

  1. How to get the vertically stacked arrangement (for mobile phone) to play nicely with the horizontal style arrangement. I can’t seem to wrap my head around how the divs are working together and can’t figure out which one’s I should be styling (or which stylings are throwing the design wonky)

  2. Getting the dividers in between the logos to sit at equal space to the logos containers (with some padding between the circles on either side) - And for them to become horizontal dividers with the same kind of spacing on the vertical arrangement.

This is what I’ve come up with so far:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<base href="https://.firebaseapp.com/">
    <!-- link rel="stylesheet" href="css/style.css" -->
    <style>


.hero {
      background-image: linear-gradient(190deg, rgba(0,0,0,0.00) 41%, rgba(0,0,0,0.40) 100%), url("./assets/img/IMG_3881.png")  ;
      // background-size: cover;
  }

  .hero &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(190deg, rgba(0,0,0,0.00) 41%, rgba(0,0,0,0.40) 100%);
        opacity: .6; 
      }

  .hero-body {
      margin-top: 75px;
      margin-left: 60px;
      width: 500px;
   }


 .hero .title { 
      /* The activities of: */
      font-family: Georgia;
      font-size: 35px;
      color: #FFFFFF;
    }

 .hero .subtitle {
      /*  */
      font-family: Futura-Medium;
      font-size: 40px;
      color: #FFFFFF;
      letter-spacing: -0.44px;
  }
 
  .hero .tabs {
    padding-left: 22px;
    height: 72px;
    background: #F2F2F2;
  }

  .hero .tabs.ul {
    margin-left: 22px;
  }
  .hero .tabs.li {
    width: 72px;
  }

  .hero .tabs li {  height: 100%; display: flex; }
  .hero .tabs a { align-items: center; border: 0px; }

  .hero .tabs li.is-active { border-bottom: solid 5px; border-top: solid #F2F2F2 5px }

  nav {
      background: #F2F2F2;
      font-family: Futura-Medium;
      font-size: 14px;
      color: #3C3C3C;
  }

.badge h3 {
    margin:0;
    color:#4D4D4D;
    font-size:1rem;
    line-height:1.2;
    font-weight:400;
    font-family:Futura-Medium;
  }

 


  .badge h4 {
    margin:0;
    padding-top:.5em;
    color:#4D4D4D;
    font-size:.9rem;
    line-height:1.2;
    font-weight:400;
    font-family:Georgia;
    letter-spacing:0;
  }

  /* Badge   */

  .badge.a .badge-back { color: black; }
  .badge.b .badge-back { color: black; }
  .badge.c .badge-back * { color: white; }
  .badge.d .badge-back * { color: white; }
  .badge.e .badge-back * { color: white; }
  
  .section.activities {
    padding: 7rem;
  }

  .cols{ 
    display:flex;
    margin:0;
    flex-flow:column;
    justify-content:flex-start;
  }
  .col {
    padding:0;
    flex:0 0 20%;
    min-width:115px;
    font-size:1.6vw;
    margin: 0 auto;
    height: 20vh;
  }

  .badge {
    position:relative;
    padding-top:100%;
    width:100%;
    height:0;
  }

  .badge-content {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
  }

  .badge-front, .badge-back {
    display:table;
    position:absolute;
    top:0;
    left:0;
    margin:0;
    border:0;
    padding:0;
    width:100%;
    height:100%;
  }

  .badge a {
    display:table-cell;
    padding:0 5px;
    vertical-align:middle;
    color:inherit;
    text-align:center;
    text-decoration:none;
   }

  .badge img { 
    padding:0;
    width:auto;
    height:5em;
  }

  @media screen and (max-width:600px){
    .cols {flex-flow: row wrap;}
	  .col{ font-size:60%; }
    .badge { min-width: 30vw; }
    
  }
  @media screen and (min-width:1000px){
    .cols{ justify-content:space-around; flex-flow: row wrap;}
    .col{ max-width:250px; font-size:110%}
    .badge { min-width: 30vw; }
  }
  
  /* Badge filp */

    .badge-content > .badge-front,
    .badge-content > .badge-back {
      transition: transform 1s;
    }

  .badge:hover .badge-content > .badge-front {
    transform:  scale(0) ;
    transition: transform 0.5s;
  }


  .badge:hover .badge-content > .badge-back {
    /* transform: rotateY( 180deg ); */
    transform: scale(1) ;
    transition: transform 0.5s;
  }
  
  .badge-front {
    transform: scale(1);
    /* transform: rotateY( 180deg );*/
  }
  
  .badge-back {
    transform: scale(0);
    /* transform: rotateY( 180deg );*/
  }
  
  .circle {
    border: 0px solid black;
    border-radius: 100%;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
  }

  .v-divider { 
    position: absolute;
    border-right:1px dashed lightgray; 
    height: 60%;
    top:30%;
  }

  @media screen and (max-width:1000px){ 
    .v-divider { 
      border-right:0px dashed lightgray;  
      border-bottom: 1px dashed lightgray;
      width: 100%;
    }     
  }



    .privacy-policy { margin-left: 20px; }
    .social-media .icon { margin-right: 20px; margin: 10px; }

    </style>
    <meta property="og:type" content="website">
    <meta property="og:title" content="The activities">
    <meta property="og:description" content="Information on  activities'">
    <meta property="og:site_name" content="The activities">
</head>

<body>
    <section class="hero">
        <div class="hero-body">
            <div class="containerz">
                <h1 class="title">The activities of</h1>
                <h2 class="subtitle"></h2>
            </div>
        </div>
        <div class="hero-foot">
            <div class="tabs is-medium">
                <ul>
                    <li class="is-active"><a>Activities</a>
                    </li>
                    <li><a>Biography</a>
                    </li>
                    <li><a>Contribute</a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <section class="section activities">
        <div class="cols">
            <div class="col has-text-centered">
                <div class="badge a">
                    <div class="badge-content">
                        <div class="badge-front">
                            <a href="#"><img src="./assets/img/CGLF.svg">
                                <h3>RELIGIOUS ACTIVITES</h3>
                                <h4>The Foundation</h4>
                            </a>
                        </div>
                        <div class="badge-back circle" style="background-color: rgb(255, 255, 255);">
                            <a href="#"><img src="./assets/img/CGLF.svg">
                                <h3></h3>
                            </a>
                        </div>
                       
                    </div>
                </div>
            </div>
            <div class="col has-text-centered">
                <div class="badge b">
                    <div class="badge-content">
                        <div class="badge-front">
                            <a href="#"><img src="./assets/img/Bumpa.svg">
                                <h3>MERIT MAKING ACTIVITES</h3>
                                <h4>Patronage and Entrpreuneurship</h4>
                            </a>
                        </div>
                        <div class="badge-back circle" style="background-color: rgb(252, 175, 23);">
                            <a href="#"><img src="./assets/img/Bumpa.svg">
                                <h3>PATRONS</h3>
                            </a>
                        </div>
                        <div class=" v-divider"></div>
                    </div>
                </div>
            </div>
            <div class="col has-text-centered">
                <div class="badge c">
                    <div class="badge-content">
                        <div class="badge-front">
                            <a href="#"><img src="./assets/img/Samye.svg">
                                <h3>TEACHING ACTIVITES</h3>
                                <h4> and teaching centers</h4>
                            </a>
                        </div>
                        <div class="badge-back circle" style="background-color: rgb(219, 51, 40);">
                            <a href="#"><img src="./assets/img/Samye.svg">
                                <h3></h3>
                            </a>
                        </div>
                        <div class=" v-divider"></div>
                    </div>
                </div>
            </div>
            <div class="col has-text-centered">
                <div class="badge d">
                    <div class="badge-content">
                        <div class="badge-front">
                            <a href="#"><img src="./assets/img/BG.svg">
                                <h3>CHARITABLE ACTIVITES</h3>
                                <h4>Healthcare in action</h4>
                            </a>
                        </div>
                        <div class="badge-back circle" style="background-color: rgb(0, 170, 165);">
                            <a href="#"><img src="./assets/img/BG.svg">
                                <h3>THE FOUNDATION</h3>
                            </a>
                        </div>
                        <div class=" v-divider"></div>
                    </div>
                </div>
            </div>
            <div class="col has-text-centered">
                <div class="badge e">
                    <div class="badge-content">
                        <div class="badge-front">
                            <a href="#"><img src="./assets/img/LL.svg">
                                <h3>SCRIPTURAL ACTIVITES</h3>
                                <h4> translations and publications</h4>
                            </a>
                        </div>
                        <div class="badge-back circle" style="background-color: rgb(0, 72, 146);">
                            <a href="#"><img src="./assets/img/LL.svg">
                                <h3> TRANSLATIONS AND PUBLICATIONS</h3>
                            </a>
                        </div>
                        <div class=" v-divider"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer">
        <div class="columns">
            <div class="column is-three-quarters">
                <p><strong>Follow </strong>
                </p>
                <div class="social-media icons"><a href="/" class="icon"><i aria-hidden="true" class="fa fa-facebook"></i></a><a href="https://www.instagram.com//" class="icon"><i aria-hidden="true" class="fa fa-instagram"></i></a><a href="https://twitter.com/" class="icon"><i aria-hidden="true" class="fa fa-twitter"></i></a><a href="https://soundcloud.com/" class="icon"><i aria-hidden="true" class="fa fa-soundcloud"></i></a>
                </div>
                <p>
                    Copyright © 2017 
                    <a href="#" class="privacy-policy">
            Privacy Policy
            </a>
                </p>
            </div>
            <div class="column">
                <label class="label">Sign up for  Mailing list</label>
                <div class="field has-addons">
                    <div class="control is-expanded">
                        <input placeholder="example@email.com" class="input">
                    </div>
                    <p class="control">
                        <button type="submit" class="button is-primary">Sign Up</button>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    </div>
</body>

</html>
1 Like

Pleased to say I’ve conquered more than half the issues :slight_smile:

Now just to tweak the breakpoints a little more…

Thanks again for all your help guys :smiley:

3 Likes

Anyone any idea why the animations in on hover are not smooth (on mobile)

Also any workaround for hover state on wechat browser, which currently doesn’t implement a hover state at all

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.