Kapteyn Universe Comments - Answer Overflow

Topics

Kapteyn Universe

KPCKevin Powell - Community

•Created by uylio on 3/10/2025 in #front-end

Increasing Div's width from it's center

I did try to fix that when I first made the animation with flex by changing the order, but it caused a visual infinite glitch 😄. The same thing happened with grid too, but it should be possible to grow the hovered div using grid-column: 1 / -1 and push the others to the next row, I believe. However, it seems like scrolling is blocking that behavior. Of course, that will possibly cause another issue— even if you manage to make the growth smooth (I'm not sure if it's possible to use transition with grid properties like I did with flex-grow before), the divs before the hovered one will probably jump to the next row before the hovered div completes its growth. Other than that, I can't think of anything else.

16 replies

KPCKevin Powell - Community

•Created by uylio on 3/10/2025 in #front-end

Increasing Div's width from it's center

For the first 4 secs updated my codepen, first and last item is meh but maybe it can give you an idea. But after the 4 seconds 😄 i would use gsap or smth

16 replies

KPCKevin Powell - Community

•Created by uylio on 3/10/2025 in #front-end

Increasing Div's width from it's center

Without flex, it should be possible to reduce widths of other divs with some selectors but it probably will cause overflow

16 replies

KPCKevin Powell - Community

•Created by uylio on 3/10/2025 in #front-end

Increasing Div's width from it's center

Yea, your full divs are too big. Idk if it can be done with them but https://codepen.io/KapteynUniverse/pen/KwKvZeO

16 replies

KPCKevin Powell - Community

•Created by uylio on 3/10/2025 in #front-end

Increasing Div's width from it's center

Looks like you did what you want to do, If i don't misunderstood your comments. You just want to make the same thing with flex, right? You can wrap alone div with another div and use flex-grow. If alone needs to be 80vw, you can change max-width with min. Also don't use viewport units for font sizes.

.alone-wrapper {
  border: 2px solid red;
  display: flex;
  justify-content: center;
}

.alone {
  text-align: center;
  border: 2px dotted blue;
  transition: flex-grow 0.5s ease;
}

.alone:hover {
  flex-grow: 1;
}

.alone-wrapper {
  border: 2px solid red;
  display: flex;
  justify-content: center;
}

.alone {
  text-align: center;
  border: 2px dotted blue;
  transition: flex-grow 0.5s ease;
}

.alone:hover {
  flex-grow: 1;
}

16 replies

KPCKevin Powell - Community

•Created by Code-S ♛ on 2/2/2025 in #front-end

Javascript logic help pls

Here, this is what i was talking about. I changed my old solution for this challenge a bit. Probably add some aria attributes and change some other things too if i look into it a little bit. Instead of an alert here, you can change the display of thank you section. https://codepen.io/KapteynUniverse/pen/MYgRBNZ

24 replies

KPCKevin Powell - Community

•Created by Code-S ♛ on 2/2/2025 in #front-end

Javascript logic help pls

Check Grace Snow's feedbacks, she gives great feedbacks, like this one: https://www.frontendmentor.io/solutions/interactive-rating-component-using-html-css-javascript-vCK__V2OnL

24 replies

KPCKevin Powell - Community

•Created by Code-S ♛ on 2/2/2025 in #front-end

Javascript logic help pls

Also you don't need another page. It can be done with a modal

24 replies

KPCKevin Powell - Community

•Created by Code-S ♛ on 2/2/2025 in #front-end

Javascript logic help pls

There are probably many ways to do it, and there isn't always a single best way. But to me, this is a proper and well-structured approach. That solution is not great in terms of both semantics and accessibility. @glutonium Yes, you do need js. That is the form submit part

24 replies

KPCKevin Powell - Community

•Created by Code-S ♛ on 2/2/2025 in #front-end

Javascript logic help pls

Also that fieldset must have a legend (or it can be a role radiogroup and use aria-labelledby or aria-label instead of legend).

24 replies

KPCKevin Powell - Community

•Created by Code-S ♛ on 2/2/2025 in #front-end

Javascript logic help pls

Use form with fieldset of radio inputs. You can get the value from checked input and show it on form submit. Also you can change the style with :checked pseudo class https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

24 replies

KPCKevin Powell - Community

•Created by Jonah on 1/26/2025 in #front-end

How to position the quote illustration?

Depends on what you trying to do i guess. If you want to put quote img inside of one or all of the testimonial, you can just use

.testimonial{
    background-image: url(https://i.ibb.co/bgrG5z8/bg-quotes.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top left;
}

.testimonial{
    background-image: url(https://i.ibb.co/bgrG5z8/bg-quotes.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top left;
}

and remove the quote div. If you want it to be at the same position of your image; use z-index on quote and try relative units instead of fixed one for positioning. Absolute positioning is smt i can't do great too but I would put quote div inside the testimonial container or just first testimonial, use position absolute on the quote and relative on the parent to make it looks like the image.

5 replies

KPCKevin Powell - Community

•Created by jnakamura on 1/16/2025 in #back-end

Firebase Authentication

I was following this to see if someone with a better knowledge respond since i am not good at backend. It is hard to say anything without seeing the code but are you checking if the user logged in and redirect them to a maybe sign in page if they are not?

3 replies