Kevin Powell - Community

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

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....
No description

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:-...
No description

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

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

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/

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.

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...
No description

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

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). ...
No description

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

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

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

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"...
No description

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

Having problem in wrapping custom hooks with React component

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

Find new positions of elements

Please watch the following video, in question 5 when I connect the answers together they are following what I want but when I submit it appears a div tag above causing the line connecting the answers to be in the wrong position. I want to ask for a solution. Thank you everyone so much....

Position Sticky stops working, after I set a sibling element to Position Absolute

```html <header> <div class="logo"></div> <div class="header__links"></div> <nav class="nav"></nav>...

question regarding "key" in js

Ik this might seem a lil dumb but can someone explain to me why we use "key" in js or react as well

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

For work, I needed some table styling and decided to use CSS Grid. Because I need even/odd row styling, I used subgrid. When searching online I couldn't find many solutions going this direction. I wrote a short post about it: https://appjeniksaan.nl/posts/table-row-styling-with-css-grid/ ```html <div class="table"> <div class="row">...