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

i'm very close but flex grow is not working.

i have put luxury text and line and year in one container and gave display flex and the outer container gave display flex and direction column but seems like there's an problem causing flex grow to not work on line and even tho i gave space between to first container still it stays together. codepen : https://codepen.io/kev00690/pen/zYgpNVV...
No description

CSS/Formatting changed after Deploying on Netlify

Hi all, So I've been working on a React site recently and after deploying it on Netlify to check non-local functionality, all of the CSS seems switched up. Everything is enlarged and not formatted correctly. When I view the local version while working on the code everything is formatted correctly and looks great. I'll include screenshots of both the local version and netlify-hosted version and see what your thoughts are. If you want the Netlify URL, DM me, because you have to sign up and create an account to access the site and I don't want a bunch of random accounts created by people trying to troubleshoot 😰 ...
No description

JS – Calling a PHP public function with vanilla javascript

A HTML <ul>list is being built with PHP and filled from the database. I am supposed to add a search-filtering function on the Frontend side. But I'm unsure about where and how the connection between the user interface and content processing happens. I feel like I have very basic(stupid) questions.
Can I assume ajax anywhere as in baseline JS or does it need to be introduced to a project like a framework?
...
No description

creating svg photo with a element

how would u approach creating something like this elements with svg photos
No description

width of anchor tag of a vertical navigation bar not being set properly

Hello guys, sorry to disturb you all; each time, I build a horizontal navigation bar; to change I wanted to build a vertical one this time. But it seems I'm having some issues with the width of the anchor tag, like I wanted extra spaces to the right of the anchor tags but this isn't being achieved; I try to modify the paddings to the right and left, nothings seems to happen.... can someone explain what I'm I doing wrong please. https://codepen.io/Fakeur/pen/KKOjgaN...

how to style for nested item

Hi guys, I wonder how to style for nested items like the image. There may be a lot of nested item. Thank you
No description

svgs aren't responsive as i thought

so i 've put the svgs seperately in their own files and use them as images, the issue is when i hover even out of bounds of the images i still keep getting the url (check bottom left) i don't know how to deal with this issue should i take the svgs and implement them directly in the dom...
No description

Trying to get rid of whitespace

Trying to get rid of whitesapce beween two divs
No description

how to remove gap of text align end.

i'm trying to align text center and when i do with full width of that heading i see that text has some padding or margin to the end but all the elements that are related to h1 in hero section has margin and padding 0 but it has some gap and when i align text to start it doesn't have gap and when i align text to end or center it has a gap how can i solve it ? i'm working on this project after 5 to 6 days i think so i'm kind of lost already like where is what from html to css so i apologize for that....

Content going upwards and out of viewport when adding new things below

When i add new content below ,the existing upper content goes out of the viewport from the top. I am not suing absolute positioning , using flex-column in the main container ```html return ( ...

Creating an inverted border-radius with CSS

Hello guys, I can't realize the variables that Kevin created on YouTube: https://www.youtube.com/watch?v=khjVPkO35F0&t=312s We have access to the copenpen code, but there are variables inserted that represent the css properties which we don't know exactly what they are. Does anyone know? Thanks

Why does child element cause parent to overflow

I don't understand why setting overflow hidden on the page info section causes the section to properly fit within the bottoms section container. Without that, the long website link causes the content to overflow the container. I have a solution but I just want to know why it works and also if there's a different way to do this because this feels hacky idk? I was trying to think of a way to set the width of the section containing the title to fit within the container but couldn't come up with a solution. ```javascript <div className="">...
No description

Counter.js not working on live site (Vercel)

So I just deployed my newest project with Vercel and I'm using the Counter.js library, but I come to an issue, where if I'm viewing the project with Live Server (VS Code), it works, and the live site (Vercel) doesn't work. Here's the link to the source code - https://github.com/GeorgeDash/xurya (I left the node_modules visible on purpose, bc the issue might be from there) - and here's a video with the issue seen:...

i wanna know if i'm doing css responsive wrong

this number scares me a bit; like i only have like 7 breakpoints, from 1920 to 1280 so far, i'm not planning to do tablet i'll jump right through mobile [430 => 360] the whole css file will end up being 3000 ish lines ...
No description

Please review my responsive design layout

I recently completed building the responsive layout for the assignment from Kevin's Course Here's the github link: https://github.com/Samtheblackdragon/Responsive-Design-Layout-1.git And here's the webpage link: https://samtheblackdragon.github.io/Responsive-Design-Layout-1/ It has two media queries as suggested in the assignment which are at 700px and 1100px. Your input/review will help me improve ....

How to use Fetch API in JS

Hello guys, sorry to disturb you all; I have just learnt about the fetch API in JavaScript. I understand what it does in terms of asynchronous loading, like having new content displayed on a web page without having to reload the page but I don't really know how to use it, like the arguments it take, what we can do etc... Is there a small project that I can do just to make me more comfortable with that please. Also, while digging into the fetch API, I came across the term "axios"; is that a library that is more performant than the fetch API ?...

What is the difference between text node and textContent ?

Hello guys, sorry to disturb you all; I was just reading about some DOM APIs and came across text node; what is it? is it the same thing as textContent ?

Nesting media queries in non-media query

I see https://developer.mozilla.org/en-US/docs/Web/API/CSSNestedDeclarations#css does this, but "CSSNestedDeclarations" is only supported by less than 50% of browsers. (https://caniuse.com/mdn-api_cssnesteddeclarations) Is it ok to put a media query inside the declaration block of another regular selector? ```css nav {...

Facing Issues with @container query or container-type

I am trying to create a message bubble where i was testing out what if the message is one-liner so i've noticed that one of the pseudo elment was overflowing out of the div which is because of its absolute postion which is mandatory too, to have the rounded corners, however I wanted to fix it using @container query where i can see that it is not getting the auto height because of which query that i added is also failing. here's the codepen thought Thanks in advance friends!! codepen: https://codepen.io/raj-shukla/pen/zYgXqrY?editors=1100...

React reducer giving error

Although the value returned to me should be 8 categories, the returned value is undefined and returns 0. When called with an action of type "GetCategoriesSuccess", the slice reducer for key "categoryListReducer" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined. actionTypes.js...