Kevin Powell - Community•11h ago

help with text in grid

https://codepen.io/etrbbr/pen/wBwgwrG On the first page, it shrinks when you compress it vertically. How can I fix this? It's probably because the first photo is a bg-img. The second question: In the grid with 8 photos, how can I fix the text like this? Also, in the grid with 8 images, the text is fine on the first image, but for some reason, it's different on the others. codepen just example

CodePen

Untitled

...

7 Replies

croganm•10h ago

I don't quite understand all of what you're saying but I think they legitimally hardcoded line breaks for the grid

<section>
      <div class="grid_8">
        <div class="item_1 item">
          <h4>deep </br>earth</h4>
        </div>
        <div class="item_2 item">
          <h4>Night </br>arcade</h4>
        </div>
        <div class="item_3 item">
          <h4>Soccer </br>team vr</h4>
        </div>
        <div class="item_4 item">
          <h4>The </br>grid</h4>
        </div>
        <div class="item_5 item">
          <h4>From up </br>above vr</h4>
        </div>
        <div class="item_6 item">
          <h4>Pocket </br> borealis</h4>
        </div>
        <div class="item_7 item">
          <h4>the </br>curiosity</h4>
        </div>
        <div class="item_8 item">
          <h4>make it </br>fisheye</h4>
        </div>
      </div>
     </section>

<section>
      <div class="grid_8">
        <div class="item_1 item">
          <h4>deep </br>earth</h4>
        </div>
        <div class="item_2 item">
          <h4>Night </br>arcade</h4>
        </div>
        <div class="item_3 item">
          <h4>Soccer </br>team vr</h4>
        </div>
        <div class="item_4 item">
          <h4>The </br>grid</h4>
        </div>
        <div class="item_5 item">
          <h4>From up </br>above vr</h4>
        </div>
        <div class="item_6 item">
          <h4>Pocket </br> borealis</h4>
        </div>
        <div class="item_7 item">
          <h4>the </br>curiosity</h4>
        </div>
        <div class="item_8 item">
          <h4>make it </br>fisheye</h4>
        </div>
      </div>
     </section>

.grid_8{
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  grid-template-rows: repeat(2, 450px) auto;
  grid-template-areas: 
  "item_1 item_2 item_3 item_4"
  "item_5 item_6 item_7 item_8";
  gap: 40px;
  margin: 0 auto;
 
  
}
.grid_8 h4{
  color: white;
  font-size: 2rem;
  font-family: "Josefin Sans" ;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
}

.item {
  background-image: url(https://images.unsplash.com/photo-1607294846590-fd005d7973e8?q=80&w=2153&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  padding-inline: 2rem;
  padding-bottom: 2rem;
  align-items: flex-end;
}
.item_1 {
  grid-area: item_1;
}
.item_2 {
  grid-area: item_2;

}
.item_3 {
  grid-area: item_3;
}
.item_4 {
  grid-area: item_4;
}
.item_5 {
  grid-area: item_5;
}
.item_6 {
  grid-area: item_6;
}
.item_7 {
  grid-area: item_7;
}
.item_8 {
  grid-area: item_8;
}

.grid_8{
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  grid-template-rows: repeat(2, 450px) auto;
  grid-template-areas: 
  "item_1 item_2 item_3 item_4"
  "item_5 item_6 item_7 item_8";
  gap: 40px;
  margin: 0 auto;
 
  
}
.grid_8 h4{
  color: white;
  font-size: 2rem;
  font-family: "Josefin Sans" ;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
}

.item {
  background-image: url(https://images.unsplash.com/photo-1607294846590-fd005d7973e8?q=80&w=2153&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  padding-inline: 2rem;
  padding-bottom: 2rem;
  align-items: flex-end;
}
.item_1 {
  grid-area: item_1;
}
.item_2 {
  grid-area: item_2;

}
.item_3 {
  grid-area: item_3;
}
.item_4 {
  grid-area: item_4;
}
.item_5 {
  grid-area: item_5;
}
.item_6 {
  grid-area: item_6;
}
.item_7 {
  grid-area: item_7;
}
.item_8 {
  grid-area: item_8;
}

This gives you more of your desired effect I also made a new class and put all the similar styles in it. No need to repeat yoruself

HelgiOP•9h ago

So actually the solution was to put <br>?..

croganm•8h ago

I mean I'm assuming that's how they controlled it. There doesn't seem to be some magical max width

HelgiOP•8h ago

thanks bro

HelgiOP•8h ago

could you also maybe help me to figure out one thing.. When you change the resolution to a smaller one, the grid starts shifting upwards, affecting the top elements.

HelgiOP•8h ago

and i also used in every because my original project has 8 different imgs but display:flex and etc it was unnecessary yeah thanks

croganm•7h ago

It's the height on the section tag. You have height 100vh. Change it to min-height 100vh

Gaming

Programming

help with text in grid