croganm Comments - Answer Overflow

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

15 replies

KPCKevin Powell - Community

•Created by Helgi on 12/17/2024 in #front-end

help with text in 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>

15 replies

KPCKevin Powell - Community

•Created by Helgi on 12/17/2024 in #front-end

help with text in grid

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

15 replies

KPCKevin Powell - Community

•Created by bockster6669 on 12/16/2024 in #front-end

Grid auto column

Credit where credit is due: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/

4 replies

KPCKevin Powell - Community

•Created by bockster6669 on 12/16/2024 in #front-end

Grid auto column

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 4; /* This gets overridden by an inline style. */
  --grid-item--min-width: 250px; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 10px;
  --grid-column-count: 4; /* This gets overridden by an inline style. */
  --grid-item--min-width: 250px; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

4 replies

KPCKevin Powell - Community

•Created by Twitch Kezavio on 12/13/2024 in #front-end

CSS help in Twitch Alerts - Text delay

There's no HTML in that codepen

2 replies

KPCKevin Powell - Community

•Created by Chrislizardc on 12/12/2024 in #front-end

When using Astro have you tried any CMS alongside with it ?

See I love shopify! Use it personally for my own business. I find liquid pretty intuitive, but one of the first templating languages I used was jinja with flask and dtl with django. It's also just a good ecomm platform. I can't get with WordPress 😂

42 replies

KPCKevin Powell - Community

•Created by Chrislizardc on 12/12/2024 in #front-end

When using Astro have you tried any CMS alongside with it ?

Lol I won't tell anyone 😂. If it was just me in the company, likely would have done the same thing 😬

42 replies

KPCKevin Powell - Community

•Created by Chrislizardc on 12/12/2024 in #front-end

When using Astro have you tried any CMS alongside with it ?

When a company does that it just instantly loses my trust

42 replies

KPCKevin Powell - Community

•Created by Chrislizardc on 12/12/2024 in #front-end

When using Astro have you tried any CMS alongside with it ?

My apologies, it wasnt them getting rid of the free tier, that was a different service. They don't allow the free tier for commercial use. That's fine, but I swear the price has jumped like 120% of what it was when I signed up? I don't mind paying but for something so simple to just jack the pricing up that much is insane

42 replies

KPCKevin Powell - Community

•Created by Chrislizardc on 12/12/2024 in #front-end

When using Astro have you tried any CMS alongside with it ?

There's so many better options out there

42 replies

KPCKevin Powell - Community

•Created by Chrislizardc on 12/12/2024 in #front-end

When using Astro have you tried any CMS alongside with it ?

Unfortunately don't think this is the answer you're looking for but my business uses astro and Prismic. Don't recommend. Used it when they had a free plan and affordable starter plan. It's mediocre at best and they've raised their prices. It's not worth me switching but I would 100% not use it in future projects.

42 replies

KPCKevin Powell - Community

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

optimization | @font-face with <link>

Yes you can! https://stackoverflow.com/questions/1330825/preloading-font-face-fonts

15 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 12/6/2024 in #front-end

Creating a scalable button with text and a SVG icon

Also, even if you did use the variable, for .btn you should have done:

.btn {
--font-size: 2rem;
font-size: var(--font-size);
}

.btn {
--font-size: 2rem;
font-size: var(--font-size);
}

Again though, don't think it's necessary

18 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 12/6/2024 in #front-end

Creating a scalable button with text and a SVG icon

You can use em further down, doesn't just have to be element having the font size declared

18 replies

Gaming

Programming