lko Comments - Answer Overflow

Well it looks like the left part is 807px wide, but in the website you can't say that the flex basis is 807px because it would suck, you have to find a way to make it responsive and still make it look good, I saw you used percentages, and i think that's a great solution

45 replies

KPCKevin Powell - Community

•Created by theseeker on 11/10/2024 in #front-end

Create this Layout

I just added this:

.right-section img {
  /* This is to make the image like in the design */
  max-width: 100%;
  object-fit: cover;
  object-position: left;
}

.left-section {
  /* This is a VERY wrong way to do things, but I don't have the design so I hardcoded the value, it only works for my screen */
  flex-basis: 1000px;
}

.right-section img {
  /* This is to make the image like in the design */
  max-width: 100%;
  object-fit: cover;
  object-position: left;
}

.left-section {
  /* This is a VERY wrong way to do things, but I don't have the design so I hardcoded the value, it only works for my screen */
  flex-basis: 1000px;
}

45 replies

KPCKevin Powell - Community

•Created by theseeker on 11/10/2024 in #front-end

Create this Layout

it seems pretty much the same, the onlydifference is that the green part in the design is wider

45 replies

KPCKevin Powell - Community

•Created by theseeker on 11/10/2024 in #front-end

Create this Layout

how is it right now?

45 replies

KPCKevin Powell - Community

•Created by theseeker on 11/10/2024 in #front-end

Create this Layout

What are you struggling with?

45 replies

KPCKevin Powell - Community

•Created by banjobongo on 11/9/2024 in #front-end

Semantic HTML Question - Does paragraph text have a parent/child relationship with headings?

So basically after na h3, all the text after is is related to the h3 no matter how many divs you use

5 replies

KPCKevin Powell - Community

•Created by banjobongo on 11/9/2024 in #front-end

Semantic HTML Question - Does paragraph text have a parent/child relationship with headings?

5 replies

KPCKevin Powell - Community

•Created by Ma-Kas on 10/12/2024 in #front-end

Vertical writing-mode figcaption refuses to shrink past certain point

Do you have a mockup of how it should look like? Even drawn on https://excalidraw.com is fine

5 replies

KPCKevin Powell - Community

•Created by Code-S ♛ on 10/12/2024 in #front-end

Padding nor margin being applied

Because it's a strong element, and by default is display: inline because it should be used in paragraphs, just wrap it into a paragraph or give it another display value, for example block or inline-block

3 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/12/2024 in #front-end

in keyframes can i do a percent of a percent

I mean, from 50 to 50.07 it goes up to 35deg, and from 50.07 to 50.15 it goes up only by 20, so he probably doesn't want a gradual transition, idk

32 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/12/2024 in #front-end

in keyframes can i do a percent of a percent

The math is easy

@keyframes background {
0%{--deg:45deg;}
50.0%{ --deg: 45deg;}
50.07%{ --deg: 80deg ;}
50.15%{ --deg: 100deg ;}
50.25%{ --deg: 135deg;}
50.32%{ --deg: 170deg ;}
50.40%{ --deg: 190deg ;}
50.50%{ --deg: 245deg;}
50.57%{ --deg: 275deg ;}
50.65%{ --deg: 290deg ;}
50.75%{ --deg: 325deg;}
50.82%{ --deg: 350deg ;}
50.90%{ --deg: 370deg ;}
51%{ --deg: 405deg;}
75%{--deg: 0deg;}
100%{ --deg : 30deg}
}

@keyframes background {
0%{--deg:45deg;}
50.0%{ --deg: 45deg;}
50.07%{ --deg: 80deg ;}
50.15%{ --deg: 100deg ;}
50.25%{ --deg: 135deg;}
50.32%{ --deg: 170deg ;}
50.40%{ --deg: 190deg ;}
50.50%{ --deg: 245deg;}
50.57%{ --deg: 275deg ;}
50.65%{ --deg: 290deg ;}
50.75%{ --deg: 325deg;}
50.82%{ --deg: 350deg ;}
50.90%{ --deg: 370deg ;}
51%{ --deg: 405deg;}
75%{--deg: 0deg;}
100%{ --deg : 30deg}
}

32 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/12/2024 in #front-end

in keyframes can i do a percent of a percent

@R.I.P I think you can use decimals, so 50.02%

32 replies

KPCKevin Powell - Community

•Created by lko on 10/9/2024 in #front-end

Why do grid gaps get bigger during transition

Yeah I know but they're not supported basically anywhere

36 replies

KPCKevin Powell - Community

•Created by lko on 10/9/2024 in #front-end

Why do grid gaps get bigger during transition

The only "solution" i found is to do something like this, the problem is that i'm hardcoding a value in max-height and the animations are weird when you do that. But that's the best I got

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: 100%;
}

.container {
  max-width: 200px;
  height: 500px;
  display: grid;
  align-items: end;
  position: relative;
  
  & > * {
    grid-column: -1/1;
    grid-row: -1/1;
  }
  
  .img-wrapper {
    height: 100%;
  }
  
  .text {
    position: absolute;
    bottom: 0;
    width: 100%;
    .description {
      
      .description-wrapper {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
    }
  }
  
  &:hover {
    .text {
      .description {
        .description-wrapper {
          max-height: 100px;
        }
      }
    }
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: 100%;
}

.container {
  max-width: 200px;
  height: 500px;
  display: grid;
  align-items: end;
  position: relative;
  
  & > * {
    grid-column: -1/1;
    grid-row: -1/1;
  }
  
  .img-wrapper {
    height: 100%;
  }
  
  .text {
    position: absolute;
    bottom: 0;
    width: 100%;
    .description {
      
      .description-wrapper {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
    }
  }
  
  &:hover {
    .text {
      .description {
        .description-wrapper {
          max-height: 100px;
        }
      }
    }
  }
}

<div class="container">
  <div class="img-wrapper"><img src="https://unsplash.it/500" alt=""></div>
  <div class="text">
    <div class="title">This is the title</div>
    <div class="description">
      <div class="description-wrapper">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto quidem dolorum sint aliquam quae, et commodi iure autem unde. Minima?</p>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="img-wrapper"><img src="https://unsplash.it/500" alt=""></div>
  <div class="text">
    <div class="title">This is the title</div>
    <div class="description">
      <div class="description-wrapper">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto quidem dolorum sint aliquam quae, et commodi iure autem unde. Minima?</p>
      </div>
    </div>
  </div>
</div>

36 replies

Gaming

Programming