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

Make checkbox width "thicker"

Is there a way to increase the thickness of a input type=checkbox? https://codepen.io/squidiw/pen/Poxombo here you can see the border of the checkbox is kinda light but then I want to make it "thicker"...

The script broke all plugins in the project

Good day. Please tell me why, because of the second script, all js constructions on the site break for me. For example, swiper js stops working, as well as menus and more https://codepen.io/Mister-Eighth/pen/KKGGJLQ...

Strange difference between ::before and ::after

I was taking a look at this post https://discord.com/channels/436251713830125568/1115936302458736711/1115936302458736711 by @Pat66 regarding an issue they were having with a pseudo element. Asides from their issue (which @mannix_ quickly provided a solution for) I noticed something else. Pat66 had set text-transform: capitalize; on the "a" tag. This worked correctly on the first link but not on the second link. If I removed the pseudo after element the capitalise worked as expected. This led me to assume that something was broken in the CSS of the pseudo element however, if I changed it to a "::before" rather than an "::after", the capitalisation worked correctly. In summary, ::after appears to break the capitalisation on all but the first <a> element....

Make underline effect

I want realise a underline hover effect on my link but the problem is the undreline take only one link https://codepen.io/alpha_66/pen/JjejLwG?editors=1010 can I get some ideas please ?...

How do i handle different logo sizes on a single web page with page load time in mind?

suppose i have 2 same logos on my web page, one is 64px wide, one is 160px wide. is it better to have 2 separate files for their respective resolutions or just 1 file but style the logos' widths in css differently? also, not losing the quality, should i always use svg or is png enough?...

getting different font-size for button element in different browsers

hey folks I have set font-size: 1.6rem and font-family: Merriweather Sans, sans-serif on my body element and set font-size: inherit to all button element like this
button {
font-size: inherit;
button {
font-size: inherit;
...

Suggestions for a header blurry background

I need a suggestion for the h1. I'm trying to get a blurry background, but I don't like how it signals the containers behind it. Does anyone have a better suggestion, or is it possible to make a radial blur effect? https://jovial-sunflower-25dc31.netlify.app/...

Why does using e.preventDefault() in this way in React not work?

I see in the docs that e.preventDefault() is supported, https://react.dev/learn/responding-to-events#preventing-default-behavior, however I am getting an error when I apply it in the following way. In the returning JSX, I'm adding an onClick() event handler to one of the html elements, and passing into that handler as an argument an already-invoked deleteBtn() callback function (pic 1), the callback of which activates an alert box and console.logs something. I have this deleteBtn() handler set to receive an e (event), and the first line of the function is e.preventDefault() so as to prevent the rest of the function from continuing to be executed. Or at least that what I assumed it would do. (pic 2)...

Feel like I'm going crazy... issue with ::before and ::after repositioning an element...

I just wanted a horizontal line above and below the text in my span element in the Header.js... for some reason when I do this it completely repositions the text halfway down the parent container Main.js... I have used these pseudoelements before and never had them reposition the element itself? I dont' know if I am just tired and completely missing something obvious? Here is the Gist: https://gist.github.com/TheHumanistX/cedf4addae4056a6ec53a6211ae2d0d2...

Figma to html css

While converting from figma to html css i should use the same units for margins ,padding etc as defined in css in figma or can i used other values for css .Because while working on a project the value defined in figma for css was large for padding and margins and does not fit well on screen.

How change css class on scroll?

I checked this guide https://www.youtube.com/watch?v=JMsNslI8KoY&ab_channel=BrianDesign But its not exactly what I want I have site-restaurant and I have food categories (main dishes deserts drinks etc.)...

Body extends below footer

Does anyone know why the body extends below my footer on smaller screens ? and there's no fix height so I don't understand what's going on.. https://codepen.io/Antony-Collin/pen/WNYejKZ...

Responsiveness of text at the right side of screen

https://share.vidyard.com/watch/s5W1DPzS4187hpY4t9iPSz? https://codepen.io/Antony-Collin/pen/WNYejKZ As you can see in the vidyard, I'm trying to fix the responsiveness of the text at the top right corner of the screen, it's a flexbox with a tags in it, made it align-items: end; so that it displays at the right side of the header. I could easily fix it by putting media queries at breakpoints but I have no idea if it's good pratice, I feel like there's a better way to make the text resize normally. I have no idea what to do....

Change base font size

Hi all. I use React with Tailwind CSS in multipage project. In figma design system there is no 16px font size, most places use 18px. Is it ok to change base font size to 18px. Is it best practice?

smooth scroll

hi , i was looking this page https://originalsoftware.com/ i was scrollling and i notice that the scrolling was so smooth, comparing to a normal page, how can i make that ?

Struggling with Sub Menu Script

I'm trying to make my sub menu collapsible, but can't get the code to do what I need it to do. the CSS is pretty large but this troubleshooting should be limited to the section "/* primary-header */". anyone know why I can't get the sub menu list to display as block on click? https://codepen.io/tvu1313/pen/LYXYVjq...

How to make line stay the same?

Is there anyone who can help? I have made a list, in the middle it is connected with 'see photo' I have put this together with CSS in such a way that it fits nicely on certain widths of screens. But if it differs a bit from screen width, it's dead. As you see in photo. How can I make sure that these lines ALWAYS stay the same??...

TS newbie ... common key value pairs

Hello again! This time it's codecademys TS course that is giving me headaches ... ```ts type Like = { username: string;...

How can I create these "bezels" (for lack of a better word) that is shown throughout this design?

I have been given a static design in Adobe Illustrator where the designer has created these "bezels". The bezels are used in multiple places throughout the design and vary in size. I'm thinking I could create a different SVG for each of the different sized bezels, however I'm not sure how I can make these SVGs responsive? Would love some help pointing me in the right direction.

Make images of different aspect ratio the same size

I don't know how to make these images the same size so that they have a same size container, I have a width of 30% on my .game span that contains the image but do I need to add a height ?? If so I don't know what units to put, every solution keep telling me to put pixels but I feel like it's a big no no. https://codepen.io/Antony-Collin/pen/WNYejKZ...