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

Carousal on a mobile device

If i wanted to make carousel like this :https://mejuri.com/world/en/shop/products/chunky-medium-hoops On small screens, it becomes carousel and on big screens it shows all images in grid structure, how can I acheive this, like how to makecarousal on small screens and grid of images on larger screens?...

all td cells the same height?

https://www45.myfantasyleague.com/2023/options?L=59840&O=113&CMD=GRID&DISPLAY=LEAGUE&ARCHIVE=* In the above site, I have a bunch of rows with data. In some cases there are tables within td elements. When that happens, it makes the td’s with only one draft pick stretch to reach the height of the entire tr. how can I make it so those td elements with one draft pick stay at a specific height and align to the top of other td elements within the row?...

useState in React - creating state to track the click of a button?

https://codesandbox.io/p/sandbox/musing-bash-5hdgh5?embed=1&file=%2Fsrc%2FApp.jsx%3A11%2C31 "Add a new state variable to keep track of the number of times the background color has been changed. Display the number of times the background color has been changed on the page." So far I have gotten as far as ...

card image out of box help

Hello everybody, I've design this in html, but when I tried to make the grey part the image put over the previous section. You can watch my codepen in this link. ¿There's any way to do the gray part? I would appreciate the help. Thank you. https://codepen.io/agilardino/pen/wvNGmYQ...
No description

Layout

How do I make make my elements start from where the logo begin: i tried margin, padding. the problem is when i resize it does not stay the same. I want something like the second photo...
No description

Wordpress Graphql Registration/Login User Resources?

any good resources on how to create graphql schemas and endpoints? How to use JWT and such with wordpress?

Next 13 (app router) redirect to not-found page with proper (404) status

Hello guys! good evening to everyone! I faced with a problem, i have an app, with dynamic routes on next 13, in one of that routes i want to redirect to not-found page, if slug, provided from url is wrong or not exist. For this purpose i use notFound() function from next/navigation. It's redirect user to proper page, everything fine, but the status of requested page is 200, which is a problem, because of SEO. All these components are server components. How to fix it? If i use static routes and pass not exist url, it works like charm. Thanks in advance!...
No description

How do I give the input the remaining space?

For some reason when I put flex-grow: 1; on it it still doesn't grow and width: 100%; pushes the button down. ```scss .submit-form { border: 2px solid red;...
No description

remove white space from SVG in react

hey, in regular html I would use svgsprite for this but it doenst work for react ,How do implement this with react?...
No description

css `color-mix` not working with paint api.

For some reason I can't seem to use color-mix to set a color for houdini's paint api. Setting a simple color or even a relative color works fine. Any Idea why color-mix isn't working for me? ```css /* working */...

Navbar links resolving differently in mobile browsers vs desktop browsers

On my website https://www.vincewebdesigns.com/ I have 2 links, portfolio and testimonials, that are linked to vincewebdesigns.com/#portfolio and vincewebdesigns.com/#testimonials. This works on desktop, but on mobile it renders as vincewebdesigns.com/portfolio and brings me to my 404 page. Not sure what the deal is with this. I'd provide code but it is really that simple....

I'm having issues with the mobile screen and z-index

Hello, please I need help with a frontend mentor project. I used Bootstrap 5 for responsiveness . But I'm having issues with the mobile screen and I'm also trying to use z-index to put the form on top of the Gray background and blue line behind the three cards. Live project: https://url-project-three.vercel.app/
Github code: https://github.com/kenekc18/URL-Project Challenge:https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G...

<h1> or <p>

Guys, I have a question regarding the perfume text above the card title, would it just be a <p> or should it be an <h2>? In my opinion, PERFUME is part of a product category, perhaps a user with a screen reader would navigate through these categories using <h2>. What is the best choice in this situation?
No description

Adding image to a flex container overrides 100vh and creates a scroll bar. How to fix?

Hello, I have the following HTML. I want to present as a simple page with hero and footer taking up the entirety of the view port. ```html...

How to know the origin of greyed out CSS properties?

When a property is greyed out like 'height' in this case, I cannot find a way for the inspector to tell me where this is inherited from. Is there any browser plugin or otherwise solution where it will always point me to the reason for the value? Thanks in advance...
No description

Size flexbox items

Hi guys, when i try to size my flexbox items the same size its not really working out. If i add a flex: 1; its looking a bit better but they are still to width and have a different height from eacother. I want them both the same size as picture on in the middle of the page. Whats the best way to eachive this with flexbox ...
No description

How to make scrollable columns in flex-grow

How do I make the left column scrollable? Right now it's scrollable but it's overflowing the screen https://play.tailwindcss.com/Hb3zQfdBZZ...

i want to show tick icon if its present in the second array i have two arrays ontherwise minus icons

so i have two data array of objects both are coming from an APi now what i want inside planData we have plan_features and inside that we have feature_id if planData's feature id is present in planCategories id i want to show a tick icon other minus icon link - https://pastebin.com/BDKYJjV3...

My most basic movable blue square program slows down the longer the browser window is open.

I will paste my js code and a link to Drew Conley's code in a reply. ...... I made some optimizations like using push instead of unshift and calling from the end of the array instead of the beginning. I have integrated a delta in the game loop which I am still tweaking. Most basic setups for movement do not take in account remembering the second to last key you pressed and are still holding. Drew Conly posted a YT video of a basic 2D game working with the desired movement, but it uses the deprecated 'which' command, the updated e.key command broke Drew's code and I do not want to copy verbatim and plagiarize because I would like to the freedom to monetize what I build. ...