Beniamino_Baggins Beniamino_Baggins - 1 month ago 11
CSS Question

circular divs computed width incorrect causing not to be circular

I have some circle divs (using large border-radius) and they're different sizes on different screen sizes using media queries. However the width doesn't kick in correctly on some media query sizes. For example here is a screenshot of it is extra small devices:

enter image description here

The images shows that the width and height are set to 80px in css however the computed width is 63px.

When I drag the screen wider, I am seeing the circles gradually become wider and wider until they are circles, kind of like a "responsive" div, rather than a div that only changes size at certain width breakpoints.

Here is a jsfiddle:

http://jsfiddle.net/52VtD/15513/

How can I get the circle divs to always be circles (same width as height)?

html:


























css:

#about-page {
height: 100%;
padding-top: 57px;
width: 100%;
overflow-y: auto;
overflow-x: auto;
min-height: 480px;
justify-content: center;
color: black;
background-color: white;
}
#content-container {
h1, h2, h3, h4, h5, h6 {
text-align: center;
text-transform: uppercase;
font-weight: 200;
}
}
.circle-container {
display: inline-flex;
margin-bottom: 40px;
width: 100%;
justify-content: center;
}
.circle {
border-radius: 75px;
border: 1px solid black;
display: inline-flex;
}
/* xs */

@media only screen and (min-width: 320px) {
.circle {
height: 80px;
width: 80px;
margin: 5px;
}
}
/* s */

@media only screen and (min-width: 544px) {
.circle {
height: 110px;
width: 110px;
margin: 5px;
}
}
/* m */

@media only screen and (min-width: 768px) {
.circle {
height: 120px;
width: 120px;
margin: 8px;
}
}
/* L */

@media(min-width:992px) {
.circle {
height: 130px;
width: 130px;
margin: 10px;
}
}
/* xl */

@media only screen and (min-width: 1200px) {
.circle {
height: 150px;
width: 150px;
margin: 10px;
}
}

Answer

You're using flexbox (specifically inline-flex) so by default, the circles will shrink to fit the container element. To prevent this, set flex-shrink: 0 or flex: 0 0 auto; to prevent this behaviour.

.circle {
  border-radius: 75px;
  border: 1px solid black;
  display: inline-flex;
  flex: 0 0 auto;
}

http://jsfiddle.net/52VtD/15520/