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

help

Background-attachment: fixed causes image to flicker on mobile

When I'm on mobile, and I scroll down to the point where the browsers' url bar disappears, the background-image flickers into a new place. ```scss section { display: flex;...

My event date picker pick dates for every month Javascript calendar

if I want to highlight the 15 august it still highlight 15 of everymonth I tried to remove it by using .remove but it doesn't work here's my code : https://codepen.io/Dennyyan/pen/mdQZYga...

Working with adaptive design

For one of my projects, I need assistance with adaptive design. For my mobile devices, I actually want a different layout from what I have on my PC. What course of action should I take? #css #conquering-responsive-layout...

Why are the tailwind classes not doing anything in the component?

So I have this navbar component where everything works correctly. Just for context: ```jsx <> <div className="hidden md:flex items-center justify-center gap-4"> <OpenGameButton session={session} />...

Index issue maybe

So when I :hover over the dot the menu appears but it's behind the second objective/list element. CodePen: https://codepen.io/Arslan-Akbar/pen/PoxrVKy...

Sass function to calc rem size - compilation error

Until today my function was working. Now I get compilation error
Compilation Error
Error: 2 arguments required, but only 1 was passed.
Compilation Error
Error: 2 arguments required, but only 1 was passed.
...

Transparent background image

Hey, is this a semantic/efficient way to create an image that has decreased opacity with text on top? https://codepen.io/deerCabin/pen/vYQqrvV...

Pseudo element explanation

Hey, let's say I've got a section with a ::before pseudo element on it, could someone please explain the difference between the pseudo element with a position: absolute; with the parent having position: relative; on it compared to it without that? I know how the position: absolute; and position: relative; functionality works but i'm just wondering if the positioning functionality without the position: absolute; on it changes or is different in relation to the section parent?

How to target a <select> 'placeholder'

Iโ€™m trying to figure out a <select> with placeholder CSS issue. I want something to say, select on of the following as a default for the drropdown but it's not a vailid option and disapears when a values is selected. I can make it work when the select is required but when itโ€™s not required, itโ€™s not (so my code isnโ€™t really working). I have: <div class="form__group ">...

Specify Which CSS Grid Wraps First

I have two grids contained inside each other, as shown in this codepen. Effectively, I want it to break the outer grid first, so that I have two lines with groups of two, rather than breaking into groups of two vertically before breaking into lines in the outer grid. ```html <div class="menu-grid"> <div class="menu-item select-border">...

Is it good practise to use "em" unit for "almost" everything ? What about CVA then ?

Imagine card component, that could be reused in 3 different places (2 different parts of UI and 1 mobile view). To make this really re-usable I put almost everything (except borders) in "em" unit. Thats way if I am reusing it in different parts of app all I need to make smaller/bigger component is just to put parent font size. Seems like quiet comfortable but on the other hand a lot of libraries are using CVA instead. For button sm/md/lg. Is it bad practise what am I doing ?...

Help needed for this Design *please explain the approach*

i need some help regarding a design is there anyone that can help me a table kind of design where each row has different heights , how do you create such designs , do we need to explicitly define heights on these and if so how do u handle responsiveness , that would need lots of media queries this is the design how can i do this using css or bootstrap...

JavaScript problem with switching tabs

I'm working on a FrontLoops JavaScript challenge. You should be able to cycle through three elements by clicking on the Change tab button. You should also be able to type in a number from 1 to 3, representing each tab index. Right now, I can cycle through the elements with the button but once I type in a value, I can't cycle anymore. Can anyone take a look and help me figure out what I'm doing wrong? https://codepen.io/savvystrider/pen/eYQQqqK...

february showing 31 days when using next month button it works fine if manually changed

my javascript calendar works fine in some month but some doesnt especially february it becomes 31 days but if i change the date manually from pc it works fine here is my code https://codepen.io/Dennyyan/pen/KKrjWpR...

Autofill email

I have two different websites. On first website i have a input tag for email when the form is submitted on this website it will move to a new website on that website i want the email input tag to be auto filled with the email vlaue entered on previous website how can i do this

CSS transitions on after pseudoclass not applying

Hello, i'm using one of kevin's videos for a neat transition effect, but i've run across a problem. My after pseudoclass aren't using the transition I've set it to. I've tried to tweak around it for hours but I'm still unable to find what's wrong. If you would like to give it a try, here's my codepen: ...

React Bootstrap

Can anyone tell me react bootstrap is used in this code or not as you can see some classes like d-flex justify-content-center is used in this project which are bootstrap classes but did not import bootstrap

Hero layout creation

Hey, i'm practicing and improving on how to achieve certain hero section layouts that are typically used and I've got a question with a design In the image, i know the two column layout is achieved by using flexbox or grid however i'm wondering the best practice to use to have the image positioned off of the screen whilst still keeping the consistent alignment etc. I'd appreciate anyone's help with this ๐Ÿ˜„...

moving text offscreen wrapping back from other side

Im trying to move text to the left then wrap it to come from the right as it is going to the left

.json

Not sure if this is front or back-end But um, can someone please tell me how to get a .json file to be fetched ? I couldn't do cors, don't know why or what that does, I assume from what I read it means being able to actually use teh content In other words I'll need to be able to actually get it with cors enabled......