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

Strike line continuing through text regardless of length…

Hello, I am trying to recreate the styled text attached and I am running into problems. I have tried various ways to achieve this, and none quite work… 1. Pseudo Class Works great until the line breaks...
No description

Mantaining field alignment across rows

Hello, I'm working on a Svelte app for a medical history application. I'm trying to render out a list of patients with name and id data, last visit and an arrow to expand the card. The issue I'm facing right now is that due to the characters not taking up the same horizontal space, there's a small miss alignment that I can't seem to fix. Here's my code:...
No description

How to work with a consumption API? (with Svelte)

I genuinely have no idea what I'm doing here. I'm watching some videos on people kinda using it, but it's all vanilla JS, I'm not really sure where I'm storing this data in Svelte. In a nutshell, I want to use the Pokemon API to get say.. 10 pokemon, but I only want to use their images for my memory-card game, to replace the numbers I have there currently. https://github.com/callum-laing?tab=repositories...

Use of breakpoints with intrinsic/fluid design

Hello, Looking for ideas or feedback on breakpoints. I like the simplification of fluid design and using clamp for text/margin/padding fluid design etc.......

Text overflow ellipses for a flex container

I have a flex container with 2 columns with an image in one and text in the second column. I want to terminate text with ellipses according to image height but I can't give a fixed aspect ratio or fixed height for an image. Can someone help me with this? https://codepen.io/AparAwasthi/full/ExMMJpw...

Responsive Design

I'm trying to interpret between these few variables here and just trying to make sure I understand them: https://viewportsizer.com/devices/ So because some screens have high dpi or ppi, that's why CSS width/height comes in (I'm looking at a list for mobile devices) ...
No description

How to animate slides using swiper.js ?

Could someone help me figure out how to create an image slider with pagination, where the center slide has an animation effect and the other two slides are on the left and right? I tried using swiper and focusable, but couldn't get the desired result. I have shared my code snippet for reference.
No description

CSS Scroll Animation

I have multiple layers of this image. I want, on scroll the image zoom between 2 towers and fade out and fade in another image. 1 solution is, to animate this graphic using an editing tool and get the video file and convert the video to images, and then load these images in canvas frame by frame when scrolling is there another way without animating this image using editing tool?...
No description

How to render image that I'm fetching from from opensource API faster

I want to learn what are the ways to render high quality images that I'm fetching from from opensource API faster so that it take less time to display those images what are the techniques one can use? Tech: Reactjs method of fetching: fetch(), axios...

Need Help improving my code

I'm trying to recreate this challenge, but I'm stuck on how I should have laid out my elements. I used grid but I'm not sure if i should include the testimonies in the bottom in the same grid or make that its own thing. And how I should I moves the ratings. I used position relative for the ratings but when the browser shrinks they over flow so I just wanted some advice on what I could do better and make my code more efficient.
No description

Flip-boxes with text

CodePen: https://codepen.io/keith-sorrels/details/BabeQpa Problem: Text upon flip is not readable because of the other boxes blocking them. I like this configuration but need it to work. Thanks....

MUI DataGrid Columns and Filter Buttons Not Working

Here's my code, anybody have any idea why the Columns and Filter buttons would not work?




...

auto layout

Hello guys I wanna know if I can make the Pink section start where the blue is starting but grow the right side to the edge of the viewport.
No description

I'm seeking work as a full stack designer and developer.

Hello Everyone I'm seeking work as a full stack designer and developer. If you have any work and planning new, kindly let me know. Here is my portfolio. ...

Generate new DOM

I was showing my stuff for other people and they said the way I'm generating new DOM is a bad practice. Is that so? what would be a better way to achieve athe same thing then?
No description

nested :is() selector

what am i missing with this selector ``` & :is(>:nth-child(1)){ background: turquoise; ...

How to create this animation using CSS

I wanted to know how to create this animation using CSS only. Is it possible?

Best way to achieve this layout with Grid

I'm trying to build this layout. I've done so with flexbox using media queries for responsiveness. However, I'm trying to figure out a fluid way of building this with grid. Is there anyway to build this responsively, where items stack on overflow, with grid columns? I've tried but using concrete values isnt getting me anywhere. Any advice is appreciated, thanks
No description