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

website translated

Hello!…this is my first time posting in here, hopefully someone can help me out with this, I just built a website with html and css, so far so good until I randomly translated the website from English to Spanish and a few things, specifically texts, got all messy, do you you how I can fix that? https://ui-designx.netlify.app...

Layout ideas

What would u fix it here?(Like in UI ) https://codepen.io/Anes039/pen/MWMaXJb here is a copy that i tried to make from my react app not the best version...
No description

flex vs grid for HTML forms and inputs?

Which one is recommended as of 2024? I see a lot of examples of laying out from elements, like this: https://www.starterapp.style/ where the flex box is the only one used. But I am afraid this is not where CSS is going... I have a feeling that grid/sub grid is the better way forward. Do you have any experiences one way or the other to share and...

Favicon Not Updating in Google Search Results

I recently published my website with Vercel and am using a Hostinger domain. The favicon is working on the site, but in Google search results, it still shows the default Vue favicon. Why? I published it a day ago my code:...

Why is blend mode not working?

I want to use mix-blend-mode: difference; for the logo but it is not working. Why is that? CodePen: https://codepen.io/FESODI/pen/LYKyZeG...

how would you approach this animation?

Specifically the big bubbles with the app icons pushing the smaller bubbles out of the way and then resetting themselves

Why it breaks?

Hey i am doing this simple scroll animation, but it breaks when is already finish, anyone have an idea about what would be the problem?

Shakey header on hamburger menu click

Hi everyone, I am working on a website, I have done the layout for desktop and mobile. The desktop header looks okay but on the mobile my nav list disappear on click and my header is Shakey ...

robots.txt is not valid

Can anyone help me how to fix this issue?
No description

CSS Media Queries and Responsive Font Sizes Not Working as Expected

I'm having trouble with making my text responsive and applying media query rules correctly. The media query rules for changing the background color of the body element do not seem to be applied. The font sizes for h1 and p elements do not appear to be responsive as expected. Any help or suggestions would be greatly appreciated! Here is my code: https://jsfiddle.net/3sjboL14/3/...

How to deploy a website with JSON Server and React

I have a react page which utilises JSON Server. This decision was made due to the client's request and we cannot change the method. I am trying to keep it only as a frontend project and trying to not include backend material. I tried to import JSON Server in an express file. But it brings up an error of module not found. I looked deep into the error and found that it is ES6 issue but i cant fix it . Then i tried using concurently which runs both npm run start and npm run server but also dosen't do anything. { "name": "christ-church", "private": true,...
No description

Help for Create layout

I'm trying to create a layout where I have a sidebar that meets the following requirements: 1- The sidebar should be fixed in position, remaining visible while scrolling. 2- When the sidebar is expanded, it should automatically push the main content to the right. Conversely, when collapsed, the content should shift back to its original position....
No description

How do you fix this problem that happens when I try to build my css project after getting a kit

hello, im extremely new to vsc and i need a help with a issue ive been trying to fix for the past 3-4 days. pretty much i am trying to build on a vs kit that is on css, and anytime i try to run or build, it would either configre the code for a infinite amount of time, or give me one of two errors; ***css No CMAKE_CXX_COMPILER could be found'. 2.- Visual Studio 17 2022 could not find specified instance of Visual Studio:...
No description

Is 'sizes' required when using w in 'srcset' ?

MDN says so, although I see a lot of real-world examples that do away with it. What happens when no 'sizes' is present. Will the browser completely ignore the srcset, or pick a size based on the current layout size of the img element (scaled by the display density) ?...

Hover effect

How can I make a hovered anchor tag white while others being gray just like this?

What are some useful things I could make using XML/HTML?

I'm trying to make some useful things to post on GitHub using XML because i'd like to practice it a bit more often. I got a dead mind.
No description

How to define max width of flex grow container

I right now have a flex grow child container with some overflow in a parent container with display flex. The overflowing container also has a sibling with a set size, and so the size of the overflowing container is not set but defined with flex grow. Though when i do this the container seems to completely ignore the parents height and width constraints. I've recreated it in js fiddle like so: https://jsfiddle.net/5kjoqdzy/32/

Help with responsive navbar menu

https://codepen.io/griffnsh-the-vuer/pen/qBzrxoG Trying to get good with mobile first and toying around at work since it's slow today. Took me a min to get show-menu to get added to the menu from my JS and after I finally got that working now the active menu background doesn't seem to hit the same height that my nav items should be creating, I'm sure it's something really dumb I'm missing but wanted to see what y'all think...
No description

How do I make this part?

Hi guys, hope you are doing well. I was wondering, how do I make this part? I used positioning, but it then becomes trash in responsiveness. So, how do I make it without using a grid? I have also tried giving negative margin. @Chris tried his best to explain to me how to overlap images using a grid, but I just can't seem to understand the concept without a video. If anyone has a video on that, please provide it.
No description

CSS HELP

HOW DO I MAKE A RESPONSIVE SQUARE