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

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

image not loading on vercel deployment

I m using react + vite , and the issue is that the destination page images r visible on my local host but when I deployed code on vercel the images don't load , I think it's a pathing issue but I m not sure what to do . Deployment: https://chet-space-tourism.vercel.app/ And the GitHub for repo is : https://github.com/Chet25/spaceTourism ;-;...

Content overflowing

when the height of the screen is decreased the content of the container are overflowing and the content is responsive when the width is adjusted,also i want the image ogf iphone to be at the bottom edge of container.Please help me resovle it link:https://stackblitz.com/edit/stackblitz-starters-7czjm2?file=index.html...

Issues with flexbox

Hi guys I am doing some practice for css because I am really bad and I am also learning tailwind at the same time. my problem is I don't now why I can justify-center a div is what I am doing impossible or what am I doing wrong ```js <div className="flex justify-center items-center gap-[4.5rem] h-[55vh]"> <div className="flex-col justify-center">/ISSUE/...
No description