Gamenait Posts - Answer Overflow

Gamenait

•Created by Gamenait on 7/19/2024 in #front-end

Looking for help.

Hi, would anybody here be willing to hop on a call with me and gave me some tips on how to improve my website css mainly responsivity. I would provide my website code on github. I found my self stuck and I dont know what to do. My code is a mess and I would be gratefull for som tips.

13 replies

KPCKevin Powell - Community

•Created by Gamenait on 3/6/2024 in #front-end

Max width with fr in grid.

Hi, I am trying to limit breakout in the grid to a amx width but would like to retain ints atributes with fr. How can I do that?

// Grid
.content,
.full,
.breakout {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(0, 1fr);
  // --full: calc((100vw - #{$max-width}) / 4);
  --breakout: minmax(calc((100vw - #{$max-width}) / 4), #{$max-br-width});
  // --breakout: clamp(0, 1fr, $max-br-width);
  --content: clamp(
    5ch,
    45vw,
    min(#{$max-width} / 2, 65ch)
  ); //clamp(25ch, 45vw, 65ch)

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [breakout-start] var(--breakout)
    [content-start left-start] var(--content)
    [split left-end right-start] var(--content)
    [content-end right-end] var(--breakout)
    [breakout-end]var(--full)
    [full-end];

  @include media("<=medium") {
    --breakout: 0;
  }
}

.content > *,
.full > * {
  grid-column: content;
  margin: 0; //TODO: Revisit
}

.breakout > * {
  grid-column: breakout;
}
.breakout {
  grid-column: full;
}
.full {
  grid-column: full;
}

.left {
  grid-column: left;
  @include media("<=medium") {
    grid-column: content;
  }
}
.right {
  grid-column: right;
  @include media("<=medium") {
    grid-column: content;
  }
}

.split {
  grid-column: split;
}

// Grid
.content,
.full,
.breakout {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(0, 1fr);
  // --full: calc((100vw - #{$max-width}) / 4);
  --breakout: minmax(calc((100vw - #{$max-width}) / 4), #{$max-br-width});
  // --breakout: clamp(0, 1fr, $max-br-width);
  --content: clamp(
    5ch,
    45vw,
    min(#{$max-width} / 2, 65ch)
  ); //clamp(25ch, 45vw, 65ch)

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [breakout-start] var(--breakout)
    [content-start left-start] var(--content)
    [split left-end right-start] var(--content)
    [content-end right-end] var(--breakout)
    [breakout-end]var(--full)
    [full-end];

  @include media("<=medium") {
    --breakout: 0;
  }
}

.content > *,
.full > * {
  grid-column: content;
  margin: 0; //TODO: Revisit
}

.breakout > * {
  grid-column: breakout;
}
.breakout {
  grid-column: full;
}
.full {
  grid-column: full;
}

.left {
  grid-column: left;
  @include media("<=medium") {
    grid-column: content;
  }
}
.right {
  grid-column: right;
  @include media("<=medium") {
    grid-column: content;
  }
}

.split {
  grid-column: split;
}

1 replies

KPCKevin Powell - Community

•Created by Gamenait on 2/28/2024 in #front-end

SVG and position absolute.

2 replies

Gaming

Programming