im learning html css responsive web design and created 3 floated columns to the left with a width of 33.33% width so they align next to each other on computers and they stack on devices with a max-width of 700px. i put a height of 100% on them all and it was going good until i zoomed in ad the text started leaking out of the column
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replit</title>
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="header">
<h1>Benefits of Random Things</h1>
</div>
<div class="row">
<div class="column1 column-m1">
<h2>The impact of social media on mental health</h2>
<p> Social media has become an integral part of our lives, and it has both positive and negative effects on our mental health. Some studies suggest that social media can lead to anxiety, depression, and other mental health problems, while others argue that it can be a source of support and connection for people who are struggling with mental health issues. What do you think?</p>
</div>
<div class="column2 column-m2">
<h2>The benefits of meditation</h2>
<p>Meditation is a practice that has been around for thousands of years, and it has many benefits for our physical and mental health. Some studies suggest that meditation can help reduce stress, anxiety, and depression, while others argue that it can improve our focus, creativity, and overall well-being. Have you ever tried meditation? What was your experience like?</p>
</div>
<div class="column3 column-m3">
<h2>The future of space exploration. </h2>
<p>Space exploration has come a long way since the first human landed on the moon in 1969, and there are many exciting developments on the horizon. Private companies like SpaceX are working to make space travel more accessible, while NASA is planning to send humans to Mars in the coming decades. What do you think the future of space exploration will look like? What are some of the challenges that we will need to overcome?</p>
</div>
</div>
<div class="footer">
<h1>No More :(</h1>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
}
.row::after{
content: "";
display: block;
clear: both;
}
*{
box-sizing: border-box;
}
.header{
border: 1px solid black;
background-color: #b1afaf;
}
.header h1{
text-align: center;
font-size: 35px;
}
[class*="column"]{
margin: 0;
float: left;
width: 33.33%;
padding: 15px;
border: 1px solid black;
height: 100%;
}
h2{
text-align: center;
font-size: 31px;
}
p{
font-size: 30px;
}
.column1, .column3{
background-color: gray;
}
.column2{
background-color: #b1afaf;
}
.footer{
background-color: #b1afaf;
padding: 5px;
text-align: center;
border: 1px solid black;
}
@media only screen and (max-width: 700px){
[class*="column-m"]{
width: 100%;
padding: 10px;
}
.column-m1 p , .column-m2 p, .column-m3 p{
font-size: 23;
}
}
i thought that the floats were leaking out of the box so i used a clearfix technique but that didnt work, all i need is for the columns to stretch and touch the footer and the text not leak out of it when i zoom in. Ill taake any help i can get please.
Flexbox might be a better, and more modern, way of handling this.
I put together this example. There may be a few css selectors you dont yet understand, but I think it will be good to learn them as you start learning about responsive layouts
https://codesandbox.io/s/silly-dhawan-7543wq
Hope it helps !