Buoy176 Comments - Answer Overflow

Buoy176

Posts Comments

KPCKevin Powell - Community

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

responsive layout issue

I was wondering the same thing

53 replies

KPCKevin Powell - Community

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

How to use curve fitted functions to eliminate media queries

I'm using SCSS and I've been using a lot this mixin to set font-size and other stuff across various viewport widths:

@mixin mx-linscale($prop, $maxVal, $minVal, $maxDim, $minDim, $measure: 100vw) {
  $maxValPx: #{$maxVal}px;
  $maxWPx: #{$maxDim}px;
  $minWPx: #{$minDim}px;

  #{$prop}: calc($maxValPx - ($maxWPx - max($measure, $minWPx)) * ($maxVal - $minVal) / ($maxDim - $minDim));
}

@mixin mx-linscale($prop, $maxVal, $minVal, $maxDim, $minDim, $measure: 100vw) {
  $maxValPx: #{$maxVal}px;
  $maxWPx: #{$maxDim}px;
  $minWPx: #{$minDim}px;

  #{$prop}: calc($maxValPx - ($maxWPx - max($measure, $minWPx)) * ($maxVal - $minVal) / ($maxDim - $minDim));
}

It will linearly change the $prop value between two viewport widths. Example usage:

.my-item {
  font-size: 94px;
  @media screen and (max-width: 1450px) {
    @include mx-linscale(font-size, 94, 62, 1450, 770);
  }
}

.my-item {
  font-size: 94px;
  @media screen and (max-width: 1450px) {
    @include mx-linscale(font-size, 94, 62, 1450, 770);
  }
}

In this case the font-size will be 94px if the viewport width is more than 1450px. In the viewport width range [1450px, 770px], the font size will linearly decrease from 94px (for 1450px viewport-width) down to 62px (for 770px viewport-width). Below 770px viewport-width the font size will remain at 62px.

10 replies

KPCKevin Powell - Community

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

Slider Animation Glitch 🆘

I see the glitch when you click on the buttons too fast. You could try not running the animation if it is already running.

5 replies

KPCKevin Powell - Community

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

responsive layout issue

Is it live now on codesandbox?

53 replies

KPCKevin Powell - Community