Jeluxe Comments - Answer Overflow

Topics

Jeluxe

KPCKevin Powell - Community

•Created by snxxwyy on 9/17/2024 in #front-end

named grid lines not working as expected

i dont really understand grid myself so i wanted to know why you used it as you did, didnt mean to sound criticizing

34 replies

KPCKevin Powell - Community

•Created by snxxwyy on 9/17/2024 in #front-end

named grid lines not working as expected

css 
.grid-lines .grid__text {
  grid-column: text;
  grid-row: text;
}

.grid-lines  .grid__image {
  grid-column: image;
  grid-row: image;
  z-index: -1;
}

.grid-lines  .grid__button {
  grid-column: button;
  grid-row: button;
  justify-self: start;
}

css 
.grid-lines .grid__text {
  grid-column: text;
  grid-row: text;
}

.grid-lines  .grid__image {
  grid-column: image;
  grid-row: image;
  z-index: -1;
}

.grid-lines  .grid__button {
  grid-column: button;
  grid-row: button;
  justify-self: start;
}

34 replies

KPCKevin Powell - Community

•Created by snxxwyy on 9/17/2024 in #front-end

named grid lines not working as expected

so i wanna know if there is one line for it

34 replies

KPCKevin Powell - Community

•Created by snxxwyy on 9/17/2024 in #front-end

named grid lines not working as expected

for ea

34 replies

KPCKevin Powell - Community

•Created by snxxwyy on 9/17/2024 in #front-end

named grid lines not working as expected

you used grid-row and grid-column, right?

34 replies

KPCKevin Powell - Community

•Created by snxxwyy on 9/17/2024 in #front-end

named grid lines not working as expected

I got question for your example, where you set grid "area"s with grid row and grid column, is there no one prop that do both? or use grid-area?

34 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

well i tried to make it as fast as i can https://codepen.io/jeluxe/pen/zYVpyee?editors=1100

20 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

Interesting solution

20 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

If it is img then this issue disappears, the problem appears when you try to do it with div or something like that, and i didn't had image so i thought of using for now a colored div, and then that issue appeared

20 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

well i still trying to understand what made this issue to appear, but anyway i want to thank you for you help.

20 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

also the solution from the forum was only partially solution, because when you move to mobile view, well let's say it is getting even worse. (i updated my code, sorry i wasn't explaining properly...) and your solution is nice but in case you only want the "img" to be only part of height, then you can't really use it as background

20 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

well it seems like if i just used real image, it would solve everything...

20 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

No description

20 replies

KPCKevin Powell - Community

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

Here is my card css file:

.container {
  display: grid;
  padding: 3rem;
}

.container>h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.cards .card {
  width: 300px;
  min-height: 400px;
  overflow: hidden;
  background: hsl(from #fff h s 95%);
}

.card-one {
  --spacing: 1.5rem;
  --gap: 1rem;
  --radius: .5rem;

  color: var(--clr-neutral-900);
  border-radius: var(--radius);
  isolation: isolate;
}

.card-one .card-img {
  height: 160px;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
  // background:linear-gradient(90deg, rgba(0, 0, 255, 0.689), rgba(255, 192, 203, 0.705))
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-one .card-content {
  display: grid;
  gap: var(--gap);
  padding: var(--spacing);
}

.card-one .card-category {
  font-size: var(--fs-300);
  letter-spacing: .35rem;
  text-transform: uppercase;
}

.card-one .card-title {
  letter-spacing: .15rem;
}

.card-one .card-description {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: .02rem;
}

.card-one button {
  position: relative;
  background: hsl(250, 60%, 15%);
  color: var(--clr-neutral-100);
  border: 0;
  border-radius: .25rem;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: .15rem;
  cursor: pointer;
}

.card-one button::after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  inset: 0;
  translate: 0 .35rem;
  filter: blur(6px);
  opacity: .5rem;
}

.card-one button:is(:hover, :focus) {
  background: linear-gradient(90deg, orange, rgb(226, 103, 123) 70%)
}


.card-two {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  background: transparent;
}

.card-two .card-img {
  height: 100%;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
}

.card-two .card-content {
  padding: 1.5rem;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
}

.container {
  display: grid;
  padding: 3rem;
}

.container>h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.cards .card {
  width: 300px;
  min-height: 400px;
  overflow: hidden;
  background: hsl(from #fff h s 95%);
}

.card-one {
  --spacing: 1.5rem;
  --gap: 1rem;
  --radius: .5rem;

  color: var(--clr-neutral-900);
  border-radius: var(--radius);
  isolation: isolate;
}

.card-one .card-img {
  height: 160px;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
  // background:linear-gradient(90deg, rgba(0, 0, 255, 0.689), rgba(255, 192, 203, 0.705))
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-one .card-content {
  display: grid;
  gap: var(--gap);
  padding: var(--spacing);
}

.card-one .card-category {
  font-size: var(--fs-300);
  letter-spacing: .35rem;
  text-transform: uppercase;
}

.card-one .card-title {
  letter-spacing: .15rem;
}

.card-one .card-description {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: .02rem;
}

.card-one button {
  position: relative;
  background: hsl(250, 60%, 15%);
  color: var(--clr-neutral-100);
  border: 0;
  border-radius: .25rem;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: .15rem;
  cursor: pointer;
}

.card-one button::after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  inset: 0;
  translate: 0 .35rem;
  filter: blur(6px);
  opacity: .5rem;
}

.card-one button:is(:hover, :focus) {
  background: linear-gradient(90deg, orange, rgb(226, 103, 123) 70%)
}


.card-two {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  background: transparent;
}

.card-two .card-img {
  height: 100%;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
}

.card-two .card-content {
  padding: 1.5rem;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
}

20 replies

KPCKevin Powell - Community

•Created by anes039 on 8/15/2024 in #front-end

Items issue

np good luck

41 replies

KPCKevin Powell - Community

•Created by anes039 on 8/15/2024 in #front-end

Items issue

Yes xd

41 replies

KPCKevin Powell - Community

•Created by anes039 on 8/15/2024 in #front-end

Items issue

So now is it working?

41 replies

KPCKevin Powell - Community

•Created by anes039 on 8/15/2024 in #front-end

Items issue

And i also think that if it pushes the item as another item and does not increase the quantity, then it means that it is getting to the else which indicates that itemInCart does not exists, i assuming...

41 replies

KPCKevin Powell - Community

•Created by anes039 on 8/15/2024 in #front-end

Items issue

And here i meant where is the state updating inside addToCart function

41 replies

KPCKevin Powell - Community

•Created by anes039 on 8/15/2024 in #front-end

Items issue

First, for your issue with double press, there is something called debounce, which supposed help with that issue.

41 replies