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

waran

5/8/2024

alignment problem while customizing the <input type="range" /> element

i have a floating anchor div above the input element, which should move aline with the thumb. But its moving slightly back of thumb after 1st half of range and slightly front on 2nd half of range. I have a video link and a GitHub project link below. Please, someone kindly help me with is issue. videoLink - https://www.loom.com/share/c96d4f861a7245c48ef588047480f173?sid=6983b73e-7105-42db-9b05-fdf7e72ea6a6 project link-https://github.com/waran2337/vidyo-pricing-page...

CDL

5/7/2024

React/Vite -> Trying to connect routes & components together through App.jsx

https://github.com/callum-laing/react-test-proj Clicking the Link at the bottom of the page does move us from http://127.0.0.1:5173 to http://127.0.0.1:5173/transition so the route is working, but the content isn't changing.. I thought it would show the component's content as I have the route path correct (I think) Edit: Is it to do with the content that is already on the page? does this need to perhaps be in a component and then rendered in also?...

CDL

5/7/2024

React + Vite Builds -what do you style in index.css and app.css?

Someone refresh my little pea brain.. app.jsx is where we import all of our components into, which then gets pushed into main.jsx and through that, pushed to our html file and blasted onto the client, yay... so our global styling is kept into index.css? what styling would we put into the app.css, in that case? Since app.jsx is going to be hosting all of our components, and it'll generally look like the below, what would you style in app.css for the most part?...

SportyOne

5/7/2024

Problem with contact form on mobile devices

Hello everyone, I hope you can help me, I'm almost desperate. My problem is the following. I created a contact form and validated it with JavaScript (client side) and with php (server side). I have also integrated a phpmailer and a success message or error message and a reCaptcha. The for,ulnar works perfectly on the desktop. It sends, it outputs the message, it redirects back to the page and then also deletes the input fields. It just doesn't do some of the things on mobile devices. It sends the message, but it doesn't update the page or return to it, nor does it give a success message, nor does it clear the fields. These errors are only resolved when I manually reload the page itself. But that shouldn't be the case....

Yas_!_ru

5/7/2024

How to replicate this style

Isaac

5/7/2024

Responsiveness issues

Good day people. I have a very big issue with making my webpage responsive. I need you helping hands ?

Wolle

5/7/2024

container size and position fixed

I realized container: size; counts as parent similar as position: relative to position: absolute to position: fixed. There is no mention of this on MDN, does anyone have any information about this? Is this a bug, or is it in the spec?...

Ullas Kunder

5/7/2024

safari and chrome design difference

hello I need help its an emergency currently I dont have mac and PM says mac ui looks different I have no idea because in chrome it look perfect: https://staging-sb.d3ptiw0ygi100w.amplifyapp.com/clubs in chrome it look right as expected but in safari all cards in the club page height is too small ...

TheJoshShephard

5/7/2024

Lottie Dynamic Text With JS?

Hey everyone, Does anyone have experience with swapping out text in personal Lottie animations? I've been trying to develop something for a source to be used in OBS, but unfortunately can't seem to figure out how to effectively target the text in the animation. ...

Megha242

5/7/2024

The website is changing its responsiveness after hosting the website ..

I created the website while on the local machine in mobile view is working fine but after hosting on mobile view its responsiveness is changing ..

Lloyd Peterson

5/7/2024

How to achieve this style

I want to create an style like in the picture, should i use grid or flex? how?

Gaurang

5/6/2024

Vanilla Css "Isolated Scroll" section

Hey all, really not sure what these are called, but I'd like to preferrably achieve this in a vanillacss/tailwind approach if possible. Most implementations I've seen of these are generally using something like GSAP. Personal I'd hate to pull in something like GSAP for a singular use case. I'd really appreciate any guidance/insights you may have! 🙏...

maxtana

5/6/2024

Trying to style SVG Sprite with CSS

I've created a sprite file with a logo in it that has 2 groups. I want to be able to style each group independently with CSS. (I've set it up this way so I can style the logo on the fly: solid, 2-color, etc). I have an ID on the SVG groups, and when I reference ONLY the ID in my CSS I'm able to change the color. As soon as I add additional selectors (eg: ".logo #group-name") it breaks and reverst to the default color. What am I doing wrong?

Fire_eyes

5/6/2024

Getting a Grid to stretch The Appropriate Length

I have a grid that holds my sidebar and my main content. I want the grid to stretch till the padding of my body. I’ve messed with setting the height to different things but the grid never expands. I would guess I might need to do something with min-height but I’m not sure. HTML <div class="sidebar"> <ul>...

ExplorerofWorlds#4752

5/6/2024

Grid Layout Issue in CSS

Hey all! I'm trying to solve this problem in my CSS, where I want three tabs to go across in columns, then the final two tabs in rows. How can I solve this issue. I've tried using

display:grid

display:grid

and it hasn't worked for me thus far

Cortan

5/6/2024

Looking for inspiration.

Hello guys! It has been a while since I was looking into the frontend stuff and to be quite honest I'm not an expert, was doing some single one pages in the past and nothing epic. Currently trying to create something breath-taking for my girlfriend, some sort of BIO page for her. She is a Journalist and and looking for some inspirations and ideas of what I can do....

Rich B

5/6/2024

Need help CSS For Responsive Hero

I wanted to ask for some assistance on making this attached image responsive. There are two objects. One on the left and one on the right. Also, there is text in the middle. I've tried to use absolute position for the two objects, but they don't scale correctly when resizing. Can someone assist with the best approach to tackle this? Thank you!

GauravKumar1502

5/6/2024

Need Help Making Inner Div Scrollable without Explicit Height

Hey folks!, I'm currently working on a project and could use some CSS expertise. I'm trying to create a layout where the header and footer take up auto height, while the main content area fills the remaining space. Additionally, I'd like the main content area to be scrollable if its content exceeds the viewport height. Here's a brief overview of what I'm trying to achieve:...

PartTimeCoder

5/6/2024

Dynamically Swapping CSS Variables in React

Hi everyone! First time posting here 🙂 Not sure if this is possible (or even recommended), I am wondering how to dynamically swap out css variables, not just update the variable value. Example, there is a list of projects displayed, I click one and a modal opens with all the details associated with the selected project. Each project manager has their own css variable with their color (eg --name1: red, --name2: blue, etc). Is there a way to dynamically check the project manager name, and then assign the background-color with the corresponding variable, or do I need to have just one variable name (eg --proj-manager) and then have it set the color to that variable?
The project is in React, and there are dozens of project managers so many different colors to be set. I will also be using the css variables for the managers in other areas of the app as well. I do have sass in the project too, but would prefer css variables if possible, but I am open to either. I should also mention I am a noob, self-taught over the last 2 years (with lots of tutorials from Kevin) and working on my first real project now. Any assistance or direction would be appreciated!...

Silvershot

5/6/2024

Explain Css animation behavior?

Here's a simple example which demonstrates the behavior of the opacity property of a fading text with an infinite animation https://jsfiddle.net/kc7t62ge/. Setting the opacity programmatically (by clicking the button LOL) does not interrupt the animation, which makes sense. However, the opacity now alternates between 0 and the new set value, in my example 0.3. Why is that? Is there a hidden property behind the css animation being set, aka max-opacity of some sort?...

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