Why is row with column cards layout not working? - html

Question

I'm building a website in which I'm trying to create a row of 2 column cards. I'd also like it to become just one row cards when the screen size shrinks.
Instead, it stays stuck on the one row format.
I've included a picture of what I'm trying to do (the colors don't matter)
Here is the HTML:
<div class="row">
<div class="column">Box 1</div>
<div class="column">Box 2</div>
</div>
Here is the CSS:
.column {
background-color: black ;
float: left;
width: 50%;
padding: 50px;
text-align: center;
font-size: 25px;
color: white;
}

Answer 1

Please note that the padding interferes with the width and because of that the .column div expands more than 50% of the screen width.
Unless you're trying to learn, what I would recommend you is to use a CSS framework such as Bootstrap. They make the life very easy when it comes to managing layouts.

Answer 2

.column {
background-color: black ;
width: calc(50% - 100px);
padding: 50px;
text-align: center;
font-size: 25px;
color: white;
display: block;
}
#media (min-width: 102px) {
.column {
float: left;
}
}
<div class="row">
<div class="column">Box 1</div>
<div class="column">Box 2</div>
</div>
You can use media queries for this purpose, you will need to find the limit, I have given 102px for the sake of the example, but you will need to find the pixel limits that works best for your case, probably in sync with mobile screen sizes.
The reason that it was stuck with the boxes one below the other was that you had a padding of 50px, so the whole width was 2 * (50% + 50px) = 100% + 100px and if you add any positive value to 100%, then the two items will not fit into a single row. Then, float: left is only needed if we are to display them in an inline manner. So, float: left is only needed in a case, you need a calc calculation to extract the 100px pixels from the divs. Finally, I have added display: block. Happy coding!

Answer 3

What you want could be achieved with a media query and CSS grid layout:
.column {
background-color: black;
padding: 50px;
margin: 5px;
text-align: center;
font-size: 25px;
color: white;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media(max-width: 500px) {
.row {
grid-template-columns: 1fr;
}
}
<div class="row">
<div class="column">Box 1</div>
<div class="column">Box 2</div>
</div>