Can someone please explain why this isn't centering properly?

Can someone please explain why this isn't centering properly?
0

#1

I have had a similar problems before but have been able to solve it by trying random things. I would like to understand css better though - why don’t the quartercircles center within the div? Everything is labeled with text-align:center.

Please let me know if you have any idea. Thanks.


#2

You could add min-width: 200px; to your row class and change col-sm-6 to col-xs-6.

The row class width is currently set to 50%. As the window shrinks, the row’s width eventually shrinks under 200px, meaning the semicircles (200px together) will break/shift. I think bootstrap’s grid system is also breaking them at a certain width (changing sm to xs fixes that).


#3

Thanks. I realize now that the circle was getting chopped apart when the screen is smaller, and this fixed that problem.

Do you have any suggestions for how to center the circle in the middle of the grey rectangle? I had the width:50% style in there to make it appear more in the center but I am hoping there is a better way to do it.


#4

Add this to your box class
display: flex;
flex-direction: column;
width:auto;

I still don’t really have a good grasp on bootstrap. FCC doesn’t go into too much detail on it. I’ve just been using the flexbox layout in CSS. Makes centering stuff super easy.

A nice guide on flexbox:

This video helped me out a lot too


#5

Perfect, thank you so much. Works great.