Search code examples
cssreactjsflexboxstyled-components

Responsive image flexbox with React and styled components

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:

Responsive, shrunk flexbox

Full-size flexbox

And here's what I have:

Div's flipping out of the containter

Huge row gap between

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%;
  }
}

    Code example