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

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

CSS Grid footer columns layout wrapping

Hey! Iโ€™m working on a site for a client and I hit a massive roadblock with the footer. See attached screenshot of Figma design. On smaller screens itโ€™s straight forward, the columns just stack. However, the problems start with larger screens. Hereโ€™s my attempt on Codepen: https://codepen.io/Framboos/pen/wvLJewP The first and last columns are static and will stay the same (first has a logo and social media icons, last has newsletter signup form). However, all the columns in between come from a CMS, so thereโ€™s no telling how many will there be and how many items will they contain, so the code has to be as future-proof as possible....
No description

Best practice to style standard HTML elements with TailwindCSS?

I am exploring Tailwind atm while learning Astro. TailwindCSS is removing all spacings, sizings and formatting of HTML elements by default, so you can use your own system. What is the best practice to style repeating elements like <p> or <h1> elements when using Tailwind? should I use @apply in my stylesheet?...

Confused why certain elements aren't full-width in display: block

In this example: ```html <div class="foo"> Bar <button>Bazz</button> </div>...

Screen Size Warning Modal

Hello everyone, I am working on a website that will be used almost exclusively on ipads, laptops and desktops. I want to at least warn people who go to it on a phone that it's not optimized for mobile devices. I watched a video from Kevin and another one that both used a dialog element when an open button was pressed. I want my warning modal/popup to come up on load or seconds after it but only for users on a phone. So I have media queries setting it to visible or not visible depending on the screen size. I wasn't able to do it with display none/flex because it was messing with my javascript. Now it's fine on mobile, but on larger devices, the invisible modal is blocking me from clicking any links on the nav bar. I'm not sure of the best way to do this, especially in an accessible way. I know I can use z-index with display: grid, but as I mentioned, display was messing with the javascript to open/close it. Here's a codepen where I reproduced the issue. https://codepen.io/MathematiCode/pen/PorpqGZ You can see the links can't be clicked at larger screen widths because the invisible modal is in the way....

Front end layout

Hello I have been trying to build a layout like this.
No description

bottom animation don't work

Hey ! I don't know why it doesnt work. Can you help me please ? Thx. ```html...