KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

help

3/9/2024

Need help with this HTML&CCS Challenge

My first problem that I'm stuck on is the <picture> element in html I'm not quite sure if I'm using it properly. My second problem is when I go from mobile to desktop my header and text seem to still be aligned centered and still have the max ch unit from mobile. I've tried fixing it but Im not quite sure how to get rid of it

Thien1311

3/9/2024

How to make this dynamic UI

Hello everyone. I have no idea to implement it. Requirement is the items which will disappear and show its hidden total when screen is increasingly narrower Ex: A,B,C,D -screen narrow-> A,B,C +1 -screen narrower-> A,B +2 Thank you everyone...

Guiee

3/9/2024

Horizontal Scroll Carousel

Does anyone know of a JS library or jQuery library for something similar to this? This was built in React, and I don't know enough about it to reverse engineer something similar. What's really special about this one is how seamless it is. You scroll down, and instead of continuing downward, you automatically start moving right until the end, and then back down. It's really cool. https://www.hover.dev/components/carousels#horizontal-scroll-carousel https://www.hover.dev/frames/carousels/horizontal-scroll...

CDL

3/8/2024

[React/NextJS] Any React Devs that can help figure out where we've gone short with this Cart?

https://github.com/callum-laing/shopping-site/tree/main We're using localStorage and useEffect.. I think we're close, but we can't quite figure out the final hurdle to get over the finish line... We're working in app/cart/page.jsx and app/shop/page.jsx....

Reine Beth

3/8/2024

swiper active solde prob

Hello awesome dev ! I have a problem, I want to make a slider with Swiper. I would prefer my active element to be on left. Only my active style has a opacity of 1. My problem is that once all my slide is visible the class swiper-slide-active stop to go to the next slide and my « next » arrow ain’t available. Not sure if im clear but here a codepen to demonstrate the problem : ...

Pat66

3/8/2024

Realize a vertical scroll

Hi everyone I realize this this is my work: https://codepen.io/alpha_66/pen/RwOrYNx?editors=0100...

Kevin Powell

3/8/2024

Can you think of a good use case for an css-only if/else like this?

So, Lea Verou put out a tweet looking at a pretty cool way to make an if/else with CSS-only, for styling things, and I was going to do a video on it... but I want to find a good use case, and I'm having trouble, so I'm open to any and all suggestions! This is the basics of it: ```css h1, h2, h3, h4, h5, h6 {...

posix

3/8/2024

CSS Columns layout with dynamic overflow-x

Please see the included code. - Why is my <main>container overflowing vertically instead of horizontally? - Why does it work when I set a fixed height on it? It should simply fill the available height it can have, and overflow on x dynamically. Many thanks for any assistance. I had expected this to be very easy, but instead it's made me hate CSS again....

columns-w-overflow-x...

conmeomaunau

3/8/2024

How can I create a shape like the one in the photo and it has a border?

I want to create a shape like in the image and it has a border around this shape. Can anyone help me?

3/8/2024

How do I make this design responsive

I want to make my teal designed paged responsive and looking like the "good food" design but I believe I am missing some important piece about the width. I have looked over the markup but I am quite confused about how this is being achieved and why I am having issues with my design. The teal page must be viewable on ipads, but I am curious as to how the "good food" page was able to have the content not stretch/exceed limits and my page is the current way it is Here is my html and css....

VSinha

3/8/2024

How to make a form above from the container without disturbing the layout?

My current layout and the layout I want i have given. Here's my current code:-...

CDL

3/7/2024

shopping site in NextJS - can't figure out how to send the card from shop/page.jsx, to cart/page.jsx

https://github.com/callum-laing/shopping-site/tree/main Starting off simple, though I'm not sure how I do this (first time trying). I need "add to cart" to send the card that I'm clicking over to cart/page.jsx and display the card on that page....

bluestreak711

3/7/2024

Responsive Design Q#1

I listed this as Q#1 because I anticipate having more similar questions. Normally, when I just place a div over the top of another div using absolute position, the position of the element becomes severely displaced when zooming in and out. In the video, Drew mentions he queries the pixel size. Is this how he gets the dpad to stay perfectly in place?...

NZAA

3/7/2024

Overlay gradient not working

Trying to understand why this isn't working.. i want the gradient to go below the parent DIV and blend into my page https://jsfiddle.net/fsp1omb5/

🜲 ɢʀᴀɴᴛ

3/7/2024

Keybinds for Nav Bar

What is the simplest way to have a keybind open a link? ( I have a navbar with 4 robust pages linked to it. I want <kbd>1</kbd> to open a section, <kb2>2</kbd> to open a section and so on.

3/7/2024

next.js and vercel

how to fix that

uliana3412

3/7/2024

Flickering/glitching issue while applying the CSS animation.

Hello everyone, I designed a "slide to unlock" component in React. It doesn't work as expected. Sometimes it's reappearing for a millisecond inside its container. I tried to change the timeout function inside animateBack() function but it didn't fix the issue. Here are pics of my code and CSS stylesheet. I also couldn't make it less DRY because TypeScript didn't allow me to combine both mouse events and touch events types...If you have any suggestions to how fix my code and maybe make it DRY, p...

angell1389

3/7/2024

using styled components override the styles of other component

I had dialog `export const Dialog : React.FunctionComponent<Props> = (props) => { return ( <DialogContainer> <h1>{props.title}</h1>...

EmSixTeen

3/7/2024

Need my column to take up the full height of the available space on desktop - probably simple!

Hey there. Probably missing something silly here, but my head is jelly for the time being. - I have this component (.infobox) with two direct children (.infobox__icon and .infobox__inner). ...

dabrianator

3/7/2024

Best way to make this Frontend Mentor challenge accessible?

I was looking at this UI challenge by Frontend Mentor and I was wondering what would be the most accessible way to implement it? https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC The design features a toggle switch that will show different prices depending on the option that is toggled. My main question is, what would be a good way to implement the toggle switch?...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.