2 column divs with divs inside center aligned responsively - html

Question

I have 2 columns inside of a div, with each column containing 3 divs each. As this is for a mobile site, I want them to be aligned in the center responsively. They're aligned fine when resized for a standard mobile (320px, 375px) like so: http://imgur.com/a/WDwSL, but when resized at tablet size, they don't center align at all. http://imgur.com/a/mMTRG
How can I get them to stay in the center no matter what size the phone size? I tried media queries and other responsive grids but they didn't work. Any help would be appreciated. Thanks!
.two-circles {
width: 100%;
}
.circles-left {
width: 37%;
float: left;
margin-left: 18%;
padding: 0;
display: block;
}
.circles-right {
width: 37%;
padding-bottom: 13%;
float: left;
display: block;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<div class="clear"></div>
</div>
JSFIDDLE

Answer 1

.two-circles {
width: 100%;
}
.circles-left,.circles-right {
width: 45%;
padding-bottom: 13%;
float: left;
}
.circles-right {
text-align:left;
padding-left: 5%;
}
.circles-left {
text-align:right;
padding-right: 5%;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
display: inline-block;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div></a>
</div>
</div>
<div class="clear"></div>
</div>
use this css. i didnt make any changes in HTML. my suggestion is you need to do some changes in both HTML and CSS

Answer 2

.wrapper{
width: 1170px;
max-width: 90%;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.column{
width: 48%;
display: inline-block;
margin: 0 .5%;
}
.item{
width: 100%;
background-color: blue;
color: white;
margin-bottom: 20px;
display: inline-block;
}
<div class="wrapper">
<h2>2 column center divs</h2>
<div class="column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="column">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
Would personally change your approach

Answer 3

There are many ways to do it but the most efficient and simplest way would be to use the CSS3 Flexbox. Designed to solve exactly these sort of layout issues.
Code reduces significantly as well. All you need is to give the outer .two-circles and inner .circles-left, .circles-right a property display: flex. Most importantly the justify-content: center to the inner circles to align it to the center. Shown below:
.two-circles {
width:100%;
display: flex;
flex-wrap: wrap;
}
.circles-left, .circles-right {
width:48%;
display: flex;
justify-content: center;
padding-bottom: 13%;
}
That's it! The rest of the code from .clear remains the same as you require.
Fiddle updated here

Answer 4

Using FLex will make this easier. See below.
body {
background: #ccc;
}
.two-circles {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.circles-left, .circles-right {
width: 37%;
text-align: center;
}
.circles-right {
padding-bottom: 13%;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
display: inline-block;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<!--<div class="clear"></div> Remove-->
</div>

Answer 5

.heading{
margin: 40px 0px;
}
.heading h1{
text-align: center;
}
.block{
width: 100%;
text-align: center;
display: inline-flex;
}
.block_left, .block_right{
width: 50%;
}
.sub_block{
background: transparent;
border: 1px solid #ccc;
padding: 25px 30px;
border-radius: 50%;
}
.block_head{
margin: 40px 0px;
font-weight: bold;
}
<div class="heading">
<h1 class="">
RATE YOUR ANXIETY
</h1>
</div>
<div class="block">
<div class="block_left">
<span class="sub_block">
1
</span>
<div class="block_head">
Nervous
</div>
</div>
<div class="block_right">
<span class="sub_block">
2
</span>
<div class="block_head">
Uneasy
</div>
</div>
</div>
<!-- Third block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
5
</span>
<div class="block_head">
Fearful
</div>
</div>
<div class="block_right">
<span class="sub_block">
6
</span>
<div class="block_head">
Panicked
</div>
</div>
</div>
<!-- second block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
3
</span>
<div class="block_head">
Anxious
</div>
</div>
<div class="block_right">
<span class="sub_block">
4
</span>
<div class="block_head">
Worried
</div>
</div>
</div>

Answer 6

Since you mentioned grids, have you tried the concepts of display:inline-blocks?
CSS
.circles {
width:48%;
margin:1%; //not really required
display: inline-block;
}
.circle-wrapper {
text-align: center;
}
HTML
<div class="circle-wrapper">
<div class="circle">
<!-- content here -->
</div>
</div>
What display:inline-block does is that it wraps the space required to be exactly as much as the content it has (unless you define the width and height of course)
Thus with that you are able to place your elements the way you want.
What i have done in circles is I have defined the width of the circle to be 48% of the entire screen. Thus the content inside receives that much amount of space. (i could go for 50 but then there won't be space for margins and stuffs).
The wrapper class aligns these inline blocks to the center just like text blocks. :)
After all. text can be treated as inline-blocks