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

ABK | Muneer

12/30/2022

is it possible to get rainbow tags in JSX like normal HTML ?

so i have extention called rainbow tags where any parents or sibling elements would get their own color to make it easier to know where the start and the end of an element and i started learning React and i find it harder to write JSX without that extension is there any extention that has the same job?

JWode

12/30/2022

Pseudo element not appearing in a tailwind codepen

Hello! I've a barebones codepen I've taken out of my project in order to have a bit of bug-hunting fun, and have found that the pseudo element (line 6) isn't appearing in codepen, but it is in my project. I'm just not sure why!...

lko

12/30/2022

How to align children of a flex children

In this situation https://codepen.io/Lko3001/pen/PoBNywG, can I make the children of the div at the bottom "follow the rules" of the parent with flex? I know I could just style the div at the bottom and make it flex, , then items center and all that stuff, but i was wondering if there was an easier way to do it

T. Issam

12/30/2022

Question about SCSS map

How to make loop with @each or some think else or join to foo-bar=>bar-foo:123 with map-get. ```scss $test:( foo:( bar: foo1,...

TOXIC

12/30/2022

Why is the stars selecting back wards?

Why is the stars selecting back wards? https://codepen.io/T031C/pen/yLqOEQZ...

Pqteras

12/30/2022

My SVG hamburger menu is not showing up.

Hello, I am pretty new to html and css and I am currently working on a navigation bar similar to Kevin's from the video called "Responsive navbar tutorial using HTML CSS & JS". My code looks like this ```css...

Abdul Ahad⚡

12/29/2022

h2 aligning to left even if I give align-center. Tailwind

https://codepen.io/ahad4387/pen/zYLqzoB

Mannix

12/29/2022

Which code is better considering accessibility and semantics

I'm trying to come up with the best way to present/code forum categories with forums list in terms of semantics and accessibility. https://codepen.io/MannixMD/pen/JjBPMGb If you have another idea on how the code should look like I'm open to suggestions 🙂...

Szabi

12/29/2022

I want to darken my banner background images

The problem is when I set the "filter: brightness(50%)" value, my banner title also got 50% brightness which I don't want to. I tried to change the title's brightness back to 100%, but it doesn't really work. I will attach 2 pictures of the code, and there is the link for the site: https://lovely-swan-09f5fa.netlify.app/...

rishit

12/29/2022

VW not working properly

vw is functioning like an absolute unit. I am trying to create a responsive navbar nd using vw as margin unit but it is functioning like an absolute unit nd I had to put media queries to fix the prob. https://codepen.io/RS_2009/pen/jOpqEqV?editors=1000...

12/29/2022

Search Bar seems to have an issue with the input text

The input element seems to create too big of an outline that either exceeds the container it's in or it matches the width and height and shows a outline border that doesn't go away. Is there any way to avoid the outline and also any suggestions on what I can do to make it look better. Seems off to me https://codepen.io/MD-2016/pen/JjBGgBz...

lko

12/28/2022

Better method to make flex children full height and text centered?

So, this is my code https://play.tailwindcss.com/VhJeG1iMb3. It's tailwind, the classes represent the style that is being applied (if you hover over the class you can see it). What I want to do is make the div full height and with the text centered, I achieved it but I had to make it self-stretched and a flexbox and then align the items in center. I was wondering if there was a better method to do it....

Spiritual Tech

12/28/2022

The screen pushes to the right when the chat feature is opened on an iPhone only

We are rolling out a new chat feature for our sites. I work for an eCommerce company and I am tasked to maintain over 50 websites. We have started building the chat feature on our test site, https://testmage.cluster.helpmefence.com/store/. I have the task of designing it. The test site is the only place where the feature is activated. Only when engaged on an iPhone, when the bubble is clicked and the chat opens, it works, but when you click in the message box, the whole screen gets pushed to the right and stays that way until the browser refreshes. It pushes the messages, message box, and logo at the top to the right and renders it unusable. I can only debug this with Browser Stack because the same issue isn't present on the mobile simulator in chrome and any other browser. When you go to the site, it's the bubble that says "Live Sales Chat" on the bottom right-hand side of the screen....

Kiran

12/28/2022

The best way to add MP4, GIF, or animated videos to an HTML page in an optimized way

actually, there's a gif file on our landing page and it's taking too long to load the page the page performance was also too slow and now I want to replace that gif file with a new gif or MP4 file so which can be the best way to implement it I'll share both the gif file previous and the new gif file and I have attached the code of the gif file it was done by PREVIOUS DEVELOPER so could you please help me out? I have tried some methods but no change in the performance....

RobyDobyDingo

12/27/2022

update swiper on content change

Hey guys, I'm using swiper js in React project and want to figure out, are there any ways to reinit or update swiper on content change(on state change for example). The problem is what I have one swiper for several tabs and clicking by tabs I want to update content inside the swiper, but then I do that, my pagination disappears. Please help:)...

gunter

12/27/2022

how to make a bottom-to-top scrollbar?

hi, i'm trying to practice creating a messaging app. here, the app has a top-to-bottom scrollbar. i'm trying to have it as a bottom-to-top scrollbar like conventional messengers out there (discord, whatsapp, ...etc). how is that possible? resourcing to an external link so i can have a further read on it is also appreciated, thanks!...

Adarsh

12/27/2022

Not able to maintain aspect ratio of image in small screens

My images are shrinking in mobile view. I want to maintain aspect ratio of image in small screens just like the given picture. Can anybody help me with this. Here is the code pen - https://codepen.io/adarsh88/pen/xxJZZrM

Adarsh

12/27/2022

Not able to span for the entire height of the viewport

I have got three divs that have specified heights. I spanned the entire width using width:100%, but the height of 100vh is not working. I want to span for the entire height of the viewport. Here is the codepen for reference - https://codepen.io/adarsh88/pen/xxJZGvq

Satya

12/27/2022

Chakra UI import error

Help! I just installed Chakra UI in my Next Project and its throwing an error:

12/27/2022

Getting the svg's into the search bar

I got the icons I needed from font awesome and the container for the search is in flex row. I tried css ::before and ::after but I dont have the icons installed so I cant use a background url. Here is a pen to see what's going on https://codepen.io/MD-2016/pen/KKBwaXy...

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