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

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

conmeomaunau

3/6/2024

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

feanor

3/6/2024

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

theboyduddus

3/6/2024

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

appjeniksaan

3/6/2024

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

lko

3/6/2024

how to prevent last item of flex to grow

section {display:flex; flex-wrap:wrap; gap:1rem}
div {background-color:red; width:0; min-width: 100px; height: 100px; flex-grow: 1}
``

section {display:flex; flex-wrap:wrap; gap:1rem}
div {background-color:red; width:0; min-width: 100px; height: 100px; flex-grow: 1}
``

html...

rmon

3/6/2024

Responsive Ideas

Hello there! Thank you in advance for your help. I've been working on a Weather API that I need to finish by tomorrow, but I've run into a slight issue. I want to make the website more responsive for mobile users, but I've honestly run out of ideas on how to make it look much nicer on a smaller screen. So, I'm reaching out to anyone who's skilled in these matters to see if they can possibly do something to enhance the design. Your assistance would be greatly appreciated. Thank you! https://codepen.io/hrphyn/pen/dyLYXVv...

CDL

3/5/2024

Help me, help you, by helping me, so I don't ask so many questions(yep?)

Here's the site: https://anglian-online.netlify.app/ Here's the code: https://github.com/callum-laing/shopping-site My question? glad you asked. See image for a detailed explanation. I created a grid with 3 columns, I was expecting each column to host 1 image/card, however it appears each column is hosting 3 image/cards....

Matt

3/5/2024

Responsive Carousel (TailWind + JS)

Hello, I'm trying to build a responsive carousel. Ideally, what I'd like to happen is that the amount of visible products decreases based on screen size. (ie: web: 5, tablet: 3, phone: 2). I tried using Grid instead of flex, but I couldn't stop content from wrapping. Any ideas would be greatly appreciated. Here's my demo:...

lazylettuce_0879

3/5/2024

Webpage CSS to make it be better on varying display size (responsive)

tell me where to start how to fix this , where to study this ,on varying display somethings get stacked overlayed distorted, messed up. Please suggest me best optimal way

Afghan_Goat

3/5/2024

Is my site layout saveable?

Two years ago I made a custom layout for my website. At a small scale it worked perfectly (only one page) but now the site is hard to navigate, the layout looks esoteric and there are too much elements (see the projects). I tried fixing it with making the background less bright and vibrant but I find that the site is still unpleasant to navigate. My question is: Should I make a complete style rework or can I fix the current style to make it more accessible? Here is the site: https://afghangoat.hu Any feedback is appreciated!...

Wonderbear

3/5/2024

simulating support for missing web apis?

Is there a way to simulate the lack of support for web apis in Firefox or Chrome? Like for example, deactivating the push api so I can test if my fallback properly triggers. I was hoping for a setting in about:config or something similar. For example, I have this line of code:...

Abdul Ahad⚡

3/5/2024

Google search result name change

Changed the domain name recently from infotelligent to selling.com. I have changed the all the title tags, meta titles and description. But I can still see the old name in the search results, how can I change this?...

3/5/2024

If anyone can help and look at my Html & CSS

I'm trying this challenge and just wanted some help on my code and what I can improve on and avoid. 1 question I had is whether or not I'm supposed to make a container when using grid or just put a width on the grid itself. I found when using a container/wrapper over my grid some of the columns and rows overflow when the browser shrinks because as the browser shrinks the container gets smaller but my columns and rows might have a fixed unit when using minmax() so they overflow. Any advice on ho...

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