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 to add stuff off of my sidebar

I want to add stuff on the right side of my website but it isnt showing up
No description

Using escaped unicode in content

Is it possible to use escaped unicode in content to get emoji combinations like Phoenix for example, seems like this is not working. (🐦‍🔥) I tried both with the plain emoji and the escaped unicode. ```css .phoenix::after { content: "🐦🔥";...

Trying to get the cards over each other properly

I want to set the back-card under the front-card with wider and shorter than the front-card, but couldn't getting anywhere... The back-card is in the demo not showing properly as in the pic https://play.tailwindcss.com/9j1fku0Afd...

Overflow Issue

https://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inpecting all of them, no luck. Can you please help...

Using Vite with SCSS

So i was advised to try scss with vite instead of just using node as i was getting errors. What i did was: -create new folder on desktop and open it in vs code - use the cmd npm create vite@latest -Selected Vanilla JS framework...

Absolute position with grid

I need help to position a text and image inside a grid item which size its 2fr but trying to position it in the place i want and then resizing the page it moves and i cant make a calc function because the size of the grid its on fr units https://codepen.io/Santiago-MR/pen/ExJMrwj...

SVGs <use> and not...

Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one of them is not getting the size of the actual svg (image) change it only changes the size of the container. The weird thing is that the two of them are responding to a change of color fill:red but just one is responding of a change of height. Can you figure out why? https://codepen.io/Ari-Cohelo/pen/WNYoBjR?editors=1101...

Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?

GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several really with this scenario, but for now this one in particular: ```...

React + Tailwindcss users? Help with some examples please!

I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but vanilla css for 3+ years and sadly, this stuff is pure alien to my little pepega brain. Could you perhaps show me an example of a card, or a navbar using React/Tailwind? or honestly just any kinda simple component so I can get a feel as to how this is used.. preferably something using grid/flex too. Thanks!...

Navbar help

i cant get the navbar to go end to end on the page
No description

Adding code blocks to websites

I see some websites and blogs like this have these really nicely styled code blocks with syntax highlighting and everything, is there a good or easy way to achieve this?
No description

Flexbox column swap without media or container querie.

I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution to work. I'm using a grid to control the logo and the image in the spirit of Jen Simmons (avoiding any queries), which is placed inside the h1, and the nav sits in the second column, and this is the content that pops underneath. I've been back and forth, and have gone a bit number blind, but I'm not able to control the nav-size, and to make the pop to one column at a smaller width. I'm changing the --_main-min-width & --_sidebar-size, but nothing is happening. Is there some issues with how the grid in the h1 is behaving? ...
No description

Is there a way to test for css nesting support?

I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make sense to make a non-nested version until browser support is wider. I would like to do something like: ```css @supports (nesting){ .nested {...

<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

This is the relevant portion of the return: ``` <ul className="quickLink_list"> <li>...
No description

creating calculator

``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgColorValue = window.getComputedStyle(a) return bgColorValue.backgroundColor == "white"...

Login Page Improvements/Changes

I'm still learning html and css. What can I improve in my login page? <body> <div class="main-container"> <div class="form-container">...

Animating outline offsets

Is there a smoother way to animate the offset of an outline? It looks choppy. https://codepen.io/night_shift/pen/wvZNxBV...
No description

Vertical alignment without wrapper?

Problem: https://codepen.io/peendoc/pen/YzMgrwN I want the links to be clickable along the entire height of the ul but also the text to be vertically centered. Do I need a wrapper inside the a tags to accomplish this? I know there are different techniques but the ones I've seen need a wrapper that is bigger than the text being wrapped, and I'm just wondering if there is any modern CSS way to do it that doesn't need an extra wrapper in this specific example....

Accessibility with icons/ images in links

Hey everyone, I have been looking around with no real luck about the best practice for using svg's as icons for my links in a nav bar. All I have really been able to find is that it's better to have the Image nested in the Link but I'm not so sure if even having the image is best for accessibility. When testing with a screen reader is keeps announcing "visited link, graphic, github" which doesn't feel quite right. Anyone done something similar or have any advice? Thanks so much! ...

Need help with setting "slide-out" animation to a slide-in form.

Currently it is working but I'm concerned about the usage of pointer-events as it will be availablt to screen readers.
No description