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

Configuring Tailwind File

I want to know what's the approach to add custom properties for the "font sizes" and "line height" of h1 , h2, p that changes different breakpoints of small and desktop screen sizes I found this but I don't know if is the most convenient form to do it: ``` tailwind.config.js: theme: {...
No description

Mix of elements in block level elements

This is from the section of the course “Inline formatting context & anonymous boxes” from the module “Unknown Fundamentals: formatting context”. “When we have a block level element, it can either contain other block level elements, or inline elements. It cannot contain a mix of them”. But from what I have been learning, it appears a block level element, (such as a div), can contain both other block level elements & inline elements simultaneously. Is anyone here familiar with this?...

Is it good practice to combine MUI and Tailwind css?

So I'm making a React app. And I like tailwind better than bootstrap, but I need the ready made components and icons. Is it considered good practice to use them both on the same project?...

Lagging scroll on mobile devices

Okay mates, been a while since I've been active here, but this issue had me trying for so long I need a set of fresh eyes. Issue is this website I am working on https://treungen.netlify.app/ has a good experience on desktop. the animations are smooth and so is the scrolling behaviour. On mobile it's not the same. probably cause of it's lack of perfomance from a computer. so I had attempts where I have no animations at all to check the result. but still the performance was just as poor. More over I checked all assets used if their file size may be to large and that caused it. maybe they do but all images are less than 200kb, so I do not think it is the reason either....
No description

React useEffect problem

~ useEffect(() => { const fetchPins = async () => { setLoading(true); setError(null);...

Theme-Toggle: Filter? BG Blend? Mix-Blend?

Hi everyone. I'm trying to use this theme toggle so that i have the little circle that shows which option is toggled on. Im wondering if there is a way to use blend modes or filters (or masks maybe?) so that only the item that the circle is over has saturation. Doesnt have to be a pseudo element, and the internal icons (the logos) dont have to be bg images. https://codepen.io/Ceecee-Hart/pen/VwObNQe?editors=1100...

Custom Font doesn't work

Hi, I have a problem with a custom font, Bad Signal. I changed its extention from .otf to .woff and woff2 using this website https://transfonter.org/ . I imported the new fonts in all html pages and in the css file and I uploaded the font files along with everything else in the File Manager folder from CPanel. I can't see the custom font when I visit the website from my phone. I only see it when I visit the site from my laptop. Here is my code and thank you very much for your help: HTML links <link rel="stylesheet" href="styles.css"> <link rel="preload" href="BadSignal.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="BadSignal.woff" as="font" type="font/woff" crossorigin>...

Networking

Hi guys, idk if this is the right place to drop this but here we go. I've been learning to code for last 8 months and been slow with my progess. i havn't given up yet but one of the main reason i started coding was because i wanted to make couple of app that i have in mind. i was hoping to make some connection with some great coder and maybe if they like the idea we'll be able to work on the app together. I've obviously have no idea where to start or how to make connection. if had the money I wo...

Keep absolute positioned item in the same place regardless of the screen size

Hello, I am working on waldo style app. When user finds a character i want to display a checkmark in that position. Currently, i am using offsetX and offsetY of the image to display checkmark. However the problem i am encoutering is that when you resize the screen checkmar's position gets all messed up because i am using fixed units. Is there a way to make sure that checkmark element always stays in the same position regardless of the screen size?...
No description

How to put video in text background, if background nor white nor black?

Hey guys! I know how to put images in text background using background-clip: text and color: transparent. I know how to put video in text background, using mix-blend-mode, but it only works if body color is black or white. Are there any ways to achieve that in colour background or even gradient background? I though about using text as svg and do clip-path, but i don't know how to convert text to svg on demand inside react app. So any suggestions are welcome! https://codepen.io/RobyDoby/pen/pomPZrR...

Achieve scrollable content where other content needs to stay in view upon expanding

I didn't know how to word the title since it has limited amount of characters but I will explain bit more here. I have a container that takes the whole screen height (100dvh). In that container I have a footer that's always fixed to the bottom of that container....
No description

bold text when clicked and unbold when other item is clicked

how to make the text bold after i clicked and not bold if i clicked the other item?

mobile height issue

i have a react typescript project with several menus, i use width: 100svw; and the width fits the screen no matter the size for all menus, however this doesn't work the same with height, is there something that would cause this to be different?

[Tailwind] How to Implement Tabs with SubTabs? (check attachment)

The attached image is what I want to do i tried some stuff but not sure how to do it this is so far what I've done : https://codepen.io/Ant-Riddle/pen/yLWbVVB?editors=1000...
No description

How to leave a space between elements in the same paragraph?

I was trying to do it from the frontend mentor challenges. I could not leave a space in the Nutrition section and I could not find how to do it. I attached the code I wrote and the result I got as a picture. Can you help me where I am doing wrong and what kind of perspective I need to do? Note: I have been working on the web for 3 weeks and I am open to other suggestions....
No description

pirate scroll theme

I am trying to make a site where the sections roll down like a pirate scroll and when changed out or in transition roll back up until the section is in view. I have no idea where to start but I am trying to do it for my site @ https://www.fishingwithdummies.site

Is there a safe/convenient way to have an embeddable JS SDK, that allows authenticating?

I am working on a game portal SDK, that will be embedded/used within various HTML5/webgl games. My backend brain would use a generic oauth flow for these kind of things (where it redirects the whole page to /oauth/authorize like URL), but given that the games could be embedded on various websites or at least on the portal website within an iframe, it would be cool if I could (in case of user not being logged in on parent game portal) show a modal or a popup for authenticating (similar to how goo...

Help to deploy React projects in cpanel.

Hello everyone đź‘‹ , please help me to deploy the React project in cpanel , .... My react project is already hosted in GitHub , I want to connect my project to cpanel with my main domain.

Border only in corners

Hello, Could does anybody know how to get borders only in corners? instead of the top border going all the way across only having like 10% of it, and then doing the same thing with the left corner having 10% of it to form like a L in the corner? Thank you.