I'm in the process of designing a stats section for a website. The layout should have two columns on desktop and stack vertically on mobile devices. Ideally, I'd like the innermost DIV content to be stacked as well, but I'm struggling to achieve this.
The desktop version should resemble something like this: https://i.sstatic.net/Gbg2S.png
While the mobile version should look more like this: https://i.sstatic.net/CubGc.png
Here is my current code:
.site-stats-wrap {
width: 100%;
margin-left: auto;
margin-right: auto;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
@media only screen and (max-width: 500px) {
.site-stats-wrap {
width: 100%;
margin-left: auto;
margin-right: auto;
background: pink;
margin-top: 15px;
margin-bottom: 15px;
}
}
/* More CSS styling properties... */
<div class="site-stats-wrap">
<div class="site-stats-group">
<!-- HTML structure -->
</div>
</div>
The two main issues I'm currently encountering are: A) The content within each column is not centered properly especially on mobile where the height varies based on content. B) Text inside the stats section does not appear on its own line.
I would appreciate any solutions that can help center the contents and address the text alignment issue.
UPDATE
Credits to Andrew Halpern for providing an answer.
.wrap {
/* New CSS styles */
}
.col1 {
width: 50%;
}
@media only screen and (max-width: 500px) {
.col1 {
width: 100%;
}
}
.col2 {
width: 50%;
}
@media only screen and (max-width: 500px) {
.col2 {
width: 100%;
}
}<div class="wrap">
<div class="col1">
<h1>I'm Centered</h1>
</div>
<div class="col2">
<h1>I'm Centered Too</h1>
<h1>I'm Centered Too</h1>
<h1>I'm Centered Too</h1>
</div>
</div>