CODEWITHSUNDEEP
htmlcssionic-frameworkflexbox
Billy Logan
Billy Logan

Reputation: 2520

Maintain aspect ratio of circles when window re-sizes

I have circles lined up using flexbox and they look decent on small screen width:

enter image description here

but as soon as I widen the width of my screen, they look really stretched. But I need them to be round from every prospect.

enter image description here

I'm not sure maybe there is a way that fixes their displaying on different screen sizes. Maybe I could have used some media queries. How to handle this?

JSFiddle

HTML

 <div class="dashboard-grey-menu">
   <div class="flex row no-padding">
     <div class="col"><div class="circle"></div></div>
     <div class="col"><div class="circle"></div></div>
     <div class="col"><div class="circle"></div></div>
     <div class="col"><div class="circle"></div></div>
   </div>
 </div>

CSS

.dashboard-grey-menu {
    height: 30vh;
    background-color: #959595;
  }

  .circle {
    border-radius: 50%;
    width: 15vw;
    height: 25vh;
    background-color: #B7B7B7;
    margin: auto;
  }

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  width: 100%;
}

Upvotes: 2

Views: 1316

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You have to set the width and height of your circle to the same value:

.dashboard-grey-menu {
  height: 30vh;
  background-color: #959595;
}
.circle {
  border-radius: 50%;
  width: 10vw;
  height: 10vw;
  background-color: #B7B7B7;
  margin: 20px;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  width: 100%;
}
<ion-content has-header="false">
  <div class="dashboard-grey-menu">
    <div class="flex row no-padding">
      <div class="col"><div class="circle"></div></div>
      <div class="col"><div class="circle"></div></div>
      <div class="col"><div class="circle"></div></div>
      <div class="col"><div class="circle"></div></div>
    </div>
  </div>
</ion-content>

Upvotes: 7

Related Questions