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

JS Form Two Submit Options

I have a form using has a ID and JS file listening to the submit method. I've got another JS code to change the ID field once the page is loaded. I'm then wanting to post that somewhere different. The issue is on page load the event listener is set on the first ID and even if I change it, that method is being called. How can I reset this?...

Is it possible to style a header like the album cover for Midnight Blue?

Well it's not an important issue, just wondering and having a go myself, but far from accomplishing it. It should be responsive on both device and font-size
Midnight blue cover

Flebox cards

Hello guys. I need help troubleshooting this weird behavior. On mobile I set the container to flex, justify space between and wrap. The the flex items set flex-basis: calc(50% - 20px) but some items stretches to 100%...
No description

is there a way to position absolute a scrollbar?

screenshot for a reference, i've added a overflow to scroll to the main panel of dashboard i dont want the side bar to scroll. but i want the scroll bar to be at the right corner of the screen position absolute isn't working. is there a work around...
No description

likes count not increasing

I am doing a youtube clone project in that the like count is not increasing help me guys plzzz
No description

Header positioning help

Hello, I am very new to coding and have been self studying html and css. I am trying to get my navigation links in the header to center with the logo in the header on the left hand side. I have tried several tactics within my CSS code with no success. Does anyone have any tips how I can accomplish this? Thank you in advance!
No description

I need some help creating this effect in my custom header

Hello! I am wondering if anyone could give me some tips on creating this effect with my section headers. I have tried using absolute positioning but that turns into a mess with different screen sizes. Thank you!
No description

How to create this paragraph style in HTML and CSS

I work with first letter of paragraph but i face the alignment issue
No description

Nextjs : How to use query to pass images between routes?

Inside a route that is called Story, I am taking an image file input from the user, then trying to use query which I think is the best way to transfer that image in to another route and let me from displaying that image there. Here the problem comes in, for some reason the image is not being displayed in that route which is the home, also no error occur, so I do not know what exactly leads for this problem. Story route code:...

Is it possible to reduce the size of a font-variable.woff2 file?

I have this Montserrat font variable from google fonts api, it has 9 weighs, from 100 to 900, but I only need 3 weights which are 400 500 600, after converting the tiff file to woff2, the file size is now at 120kb (it was 400kb before) which is still too large, I would like to drop the weighs and characters which I dont need to minimize the file as much as possible. I tried fontsquirrel.com, but it removes all the weighs except one…

How to detect if device is touchscreen?

Hi, I'm trying to make a component a little more user friendly by applying certain CSS rules based on the user's device. If it's a touch screen I'd like to permanently show some buttons, whereas on a regular computer those buttons would appear only when hovered over with the mouse. Since there are touch screens even for desktop computers these days, I will probably use additional media queries to restrict this based on the window dimensions. But I will worry about that later. For now, I was wondering what's the most effective way of doing this using CSS only. With JavaScript I've used something like this before:...

NextJs with supabase auth setup.

Hi, Im trying to use next as a frontend only and setup auth with supabase. Im confused so much. Can anyone help?

Help make these three containers smaller

Hey there! I have these three containers that are meant to display projects I've been trying to make them smaller in size to look more appealing but I've gotten stuck. Would anyone be able to help me? I'll post a CodePen of the website!
No description

JavaScript

Hey Guys 👋, I am new at web dev but I am have some little experience in python, Anyway, The help I want from you guys is about my style of writing JavaScript and any useful advice you can give me and also when I add a new book the remove and read bottom doesn't seem to work. PS my focus is on the JS not the HTML and CSS. LINK: https://codepen.io/Yussif-Karim/pen/mdgyPBw

How to expand the white background, When I click on the plus image?

HTML: <div class="container"> <div class="flex"> <img src = "icon-star.svg"> <h1>FAQs</h1> </div>...
No description

How to do a good responsive for large screens?

In the last few moment I'm having a weird problem. The design send a project, I do it almost like perfect pixel for my screen resolution, that is 1920x1080. But the designer have a large screen, I think 2560x1080. I use browser devtools to see the websites on this screen size, but he also have the default scale of this kind of monitors, that put 125% of zoom. There is some math that can help me to always make the websites correctly for this type of large screens? What I'm doing know is: I that the values of a normal screen like mine and let's supose that the element has a width of 400px. So I use 67% of this value as default, on this case, 268px, and later I put a ' @media (max-width: 1920px)' and there I use the 400px, but I thing that probably exist a better way to do this. Can u guys help me, please?...

Fallbacks for svh units on older iOS devices?

Hi there I'm testing my CSS on older iOS devices as our site gets most of our visitors from iPhones and I'm running into an issue where they seem to think they can use svh but the result is always zero, and so any CSS rules using them won't fall back to any other rule, they'll just give the wrong value. First I tried... ```scss...

Display image query in Nextjs

I take an image input from the user in a route called story, then I used useRoute query to navigate to the home route with the image as a query, then I entered it inside the image tag to display it, but nothing was displayed, and without any error to let me know from where the problem is coming from, this is the code that is used to display the image: ```js useEffect(() => { if (image) {...

How can i create this shape with css

I've tried skew, I've tried clip-path the issue is with clip path i cant retain the border-radius and for some reason it also losses the shadow
No description

Responsive shop page layout - Grid/Flex?

Hey, I'm stumbling on this problem for the 9000th time. I have made a webshop with two column layout: left - text information right - product information...
No description