As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to be difficult for me. Specifically, my struggles include attempting to use a responsive layout with fixed column heights, which results in text overflow, and trying to create equal-height columns using flex properties without media queries.
In my design, I have three columns and my objectives are as follows:
- For large devices: display a single row of three equal-width columns
- For medium devices: show two columns in one row each taking up 50% width, followed by a single column taking up the full width in the next row
- For small devices: list three rows with each column occupying 100% width
My current code on JSFiddle outlines my attempts so far: View Here
I am encountering two main problems:
- The background color height of the columns is not consistent across all three columns, despite the border being uniform
- The columns fail to expand over multiple lines, especially in the context of smaller devices
Snippet of the accompanying CSS code is provided below for reference:
*{
box-sizing: border-box;
font-family: "Book Antiqua";
}
h1 {
margin-bottom: 15px;
text-align: center;
}
.row {
width: 100%;
display: flex;
overflow: auto;
}
.box {
flex: 1;
background-color: #AAAAAA;
color: white;
text-align: justify;
padding: 10px;
margin-left: 20px;
margin-right: 20px;
}
h2 {
position: relative;
background-color: #222222;
color: white;
border: 1px solid white;
text-align: center;
width: 40%;
margin-inline-start: 60%;
}
...
... (Remaining CSS styles)
... Your insights and suggestions are greatly appreciated to tackle this challenge effectively!