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

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.

Moataz

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?...

Daryl M

3/7/2024

position:fixed; scroll-y

I have a mobile header with position: fixed; style. It has a lot of menu items that make the last items hidden/cut-off from the screen. I want to be able to scrolldown so I can see those hidden items. overflow-y: scroll; doesn't help....

Matt

3/7/2024

Responsive Carousel V2

Goal: Create a responsive carousel for all screensizes Here is my attempted solution - https://codepen.io/Matt-CopOffMatt/pen/eYopOWj Using (multiple) media queries, I reduced the amount of visible cards. Then, using JS, I used a formula productRow.scrollWidth / productRow.offsetWidth) + productRow.offsetWidth to determine how much many cards to move per click (previous vs next)...

ronyshahab

3/6/2024

Nested route problem

I have a nested route system, One is in App.js and one in RoomGuard component The app.js has router to render roomGuard and roomGuard has the route to render other child component But it is not happening how to solve this. console.js:213 No routes matched location "/posts"...

Gamenait

3/6/2024

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,...

ronyshahab

3/6/2024

Having problem in wrapping custom hooks with React component

This is my code:- const App = () => { return (...

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 🙂.