Issue
I'm a complete begginer, already desperate for a solution. I know it's basic stuff, but I've been through so many tutorials, tried grid templates, basically tried everything. Now it's all mixing up in my head and I will be grateful for any help.
I have six images in a flexbox, which are meant to be counters. They are styled.divs, containing an styled.img, styled.p and another styled.div wrapping the React CountUp. Everything is wrapped in a styled.div with display: flex. I have six ImgWraps and six p tags, since there will be different numbers and texts on it - this is the only way to make it adjustable (I think).
I also have the buttons, but they are not the problem here (at least for now).
Here's what I want to achieve:
And here's what I have:
Div's flipping out of the containter
Some images go beyond the container as well as the p tag.
The full-size grid is almost as intended. The row gap is too big and I don't know what's the reason for that. I don't need the images to be "sticked" to each other, I wanted to have a small gaps between them. I've also tried centering the texts on the image, but nothing worked except the solution I'm using now. Also, the texts will have different length as well as the numbers, so I'm not sure how to do that automatically.
AboutWrapper (the main container) code:
export const AboutWrapper = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 20 auto;
object-fit: cover;
align-content: space-evenly;
z-index: 1;
height: 770px;
width: 100%;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding: 0 24px;
row-gap: 0;
justify-content: center;
`;
The Img1Wrap (one of six):
export const Img1Wrap = styled.div`
max-width: 343px;
justify-self: center;
align-self: center;
justify-content: center;
text-align: center;
align-content: center;
position: relative;
height: 30%;
`;
ImgDesc, the p tag on the ImgWrap divs.
export const Img1Desc = styled.p`
font-size: 18px;
position: absolute;
height: 100%;
color: yellow;
z-index: 4;
top: 50%;
left: 30%;
`;
And the styled.img:
export const Img1 = styled.img`
width: 90%;
z-index: -1;
align-self: center;
justify-self: center;
margin: 0 0 5px 0;
padding-right: 0;
`;
Solution
This is just the basic styling you need to get the same distribution of items of that grid:
<body id='root'>
<div class='flex-box'>
<div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent stat bg-image" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
<div class="templatecontent stat bg-image" style="background-image: url('https://www.zoomiami.org/assets/2440/air-boat.jpg');">
</div>
</div>
</body>
And the css:
#root {
height: 100vh;
width: 100vw;
}
.flex-box {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.templatecontent {
flex-basis: 33%;
flex-grow: 1;
background-position: center;
background-size: cover;
}
@media (max-width: 600px) {
.templatecontent {
flex-basis: 100%;
}
}
Answered By - earayad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.