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

Shail

11/17/2023

How to handle JWT token cookie from backend in React

Hi Everyone, Need some guidance on a issue I am stuck on. I am mostly a backend developer and new to Frontend. I am working on a service which has Spring Boot app as a backend; which is secured with Jwt token that is returned in HTTP Cookie. It has /login, /refresh-token endpoints to login and refresh expired tokens. ...

Hency

11/17/2023

how to style single mui components like textfields

Hello everyone, I'm having a really bad time trying to customize a textfield in react with material ui. What I want to do is to be able change color of label, default border, input text and placeholder. ...

Highly Nonexistent

11/17/2023

How to preserve the default border style swap for buttons when pressed?

Default buttons have that neat effect that swaps the two colors of their outset when pressed. However, once you customize anything other than the width, that effect goes away. While I know I could probably achieve the effect by setting border colors and then swapping them with button:active, I'd like to know if there's a way to preserve this default behavior while changing the color/setting the style to outset without having to access the pseudo-class.

CDL

11/16/2023

Scroll snapping/div spacing when scrolling

Firstly I'm trying to have it so that when I'm scrolling down, it smoothly snaps into each project on the way down (is that even possible?) Secondly, how the heck do you space out your projects/divs when scrolling? right now I have margin-bottom: 500px which I absolutely hate, and it still doesn't solve how close my first project is to my icons at the top, nor does it solve how small my last project is due to the footer also taking up space. codepen:...

EnnyMeeny

11/16/2023

Hello!

I have some weird issues with padding's and margin's. I have this mysterious left margin that i have no idea where its coming from, or maybe my whole approach to this is bad. I have no idea since i'm relatively new.

Ahmed Kashkoush

11/16/2023

best Practices for avatar section

Harun

11/16/2023

Is there a way to build this layout with FlexBox?

Here is the codepen that I tried to make it with Grid, and it kinda works, but i feel like it becomes way too complicated with css grid. https://codepen.io/harunjonuzi/pen/vYbOWLa...

Pat66

11/16/2023

center with flexbox

Hi everyone I want center the content of my body but I don' t know what is going wrong html code: ...

seekinfox

11/16/2023

Next js routing issue, AWS, S3

scenario 1 : after website loads navigate to a page from navbar , it loads , refresh it , page fails to load ``` <Error> <Code>AccessDenied</Code> <Message>Access Denied</Message>...

Stephin Maju

11/16/2023

Anyone explain the calc() function?

Width : calc(30% - 5px) what is the meaning of this function??

AldiBoi

11/16/2023

Issues with overflow and in a flex grow container

Basically the above title. I am working on a codepen for a general idea of the question but I think it would be more confusing than describing the issue. What I am building is as follows: -> I am also using tailwind - Dashboard with 2 parts in a flex-col one above the other --- 1. Thin Ui Stuff --- 2. Big box that i want to stretch into the rest of the screen, while still allowing overflow-scroll in the children without the entire page scrolling (Problem is Here)...

Brandon

11/16/2023

Some styles missing in firefox

Some of my element's styles are not being applied in firefox, as you can see, the highlighted element has classes .primary and .button-like, I am applying a display: flex, seen in the highlighted line of the stylesheet but it does not show in the style inspector It works on other browsers...

Anurag Gupta

11/16/2023

Facing Issue on Layout on Extra Small Screen

I am trying to make Landing page of an organization(basically copying its design). Link to codepen is this: https://codepen.io/anurag1989/pen/jOdayJR The issue I am facing is when the screen size is getting less than 270px, the <body> (and hence its children <head> and <main>) element is shrinking more than the screen size (when using in responsive mode). This is leading to a blank space between the Screen and <body>. I have tried different ways like using display: grid for <main> but in that case, the .container is flowing out of <main> at size less than 290px. What is causing this issue as I am not able to figure it out. Please also comment on code quality and any tip to iprove it....

Bola.Ghaly

11/16/2023

Make SVG path proportionate

Hi guys, it's my first time posting or asking for help here, so I am sorry if I miss anything. I am trying to edit this SVG path to make the "bottom" part (in red) proportionate to the "top" part (in green) using this website: https://yqnn.github.io/svg-path-editor/ but I just can't seem to make it perfect ```html...

Happy_Happy

11/15/2023

Disabling page scroll during page load and using Lenis smooth scroll

I want to disable scrolling during page load and also have Lenis smooth scroll on my website. I have the code below to prevent scrolling during page load. The problem is that if I scroll during the page load, after the page load ends, the page jumps to the extent of the scroll. Does anyone know how can I solve this problem? ```<style> /* LENIS CODE */ html { scroll-behavior: initial; }...

ŽoHo

11/15/2023

CSS grid and image

So im having issues with image behaviour in css grid. HTML and CSS code will be provided down but to explain: I have 2 columns in grid where one (containing img) is 35% width while other (content) is 1fr or 65% meaning rest of the grid width. Now when i resize dimensions to make it smaller using inseptor tool (responsive) it works as it should. The image witdh is 35% and its height is equal to height of content div. But when i expand the dimensions the image continues to expand and because of that makes the content div height bigger and bigger making white space in it. What I want is that height of image stops expanding and is equal to height of container div. Without setting fixed height since content div should be able to get or lose more elements so its height will be changed depending on the content that is rendered....

Nutsock

11/15/2023

I need help creating this division effect using CSS.

Hey all! hope you're well! I am creating a project at the moment, and in my hero section, I want a series of images in a slideshow on the left, and on the right a solid color with some text and a button in it. Currently I am just trying to work out how I would set up the container for this. ...

Igor Petrovic Design

11/15/2023

CSS FLEX — Change item order, but only if wrap occurs

I would like to reorder flex items but only if it's wrapped. The only way I see now is to go to Inspect and note the viewport width at which wrapping occurs, and then add media query with order property added to the item in subject. Is there a "natural" way of achieving this, through a property and not query? I might change the paddings, margins, etc. down the road, so I would need to search and edit the breakpoint each time in the query. Thanks!...

Ringhoo

11/15/2023

Accessibility - nav toggle

I took Kevin's responsive layouts course few weeks ago and in one of the challenges I remember him changing a code for hidden menu (hidden because of hamburger button on the phone) from display:none; to visibility:hidden; height:0; position:absolute; explaining that it's better for accessibility. Today I watched this video https://www.youtube.com/watch?v=YAqRQoN8ykI focused on accessibility in navigations in which display: none was used again. I don't know if the video is older (1.12.2022) or the course is (unknown) and now I'm not sure which approach is actually better or if there is even difference....

Chaves

11/15/2023

How to name my custom properties semantically

Hello everyone, I would like some help and suggestions for articles that I can read about how I can name my custom properties in a better way. Instead of just naming the colors like: --red, --blue, --cyan, etc. I want to learn a better way of how I can name them, I heard that I should name the colors as primary, secondary (accent), neutral....

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