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

help

Piesz

6/25/2024

Where should I use the clamp() function and what to use for responsive design overall

Just what the title says. When I've discovered the clamp() function, I've been using it everywhere so I can avoid media queries, should I keep doing that? I've been using that for padding, margin, position, everything overall, here is a sample of my code: ```css #logo { font-size: clamp(0.94rem, 1.56vw, 3.75rem); color: #fff;...

محمد

6/25/2024

array doesn't want to go away

i want array values that are numbers to be deleted but it doesn't go away and it still shows as ""

Pavan

6/25/2024

I need help with media-queries for Responsive Web layout

when i start writing media-queries i mess up so many things like hamburger menu and grid layout for cards.if somebody know how to change the elements size and text-sizes while writing media queries that would be really help full

snxxwyy

6/24/2024

@font-face practices

Hey, what are some best practices for using @font-face? Perhaps some properties that are a must? I currently use it like this, i'd appreciate any pointers, things i've missed or clarification that i've got it down. Thanks in advance. ```css @font-face { font-family: 'xyz'; font-style: normal;...

Kruizin

6/24/2024

how to get heading section button on shopify to be responsive

I'm struggling to get a button on my heading section on shopify to be responsive, I can't get it to be in the spot i want for all resolutions? Any help ❤️ here is the website https://www.evcustom.ca/. I've tried coding it for two resolutions but I think there must be an easier solution, and If I try to code another resultion is doesn't work, i've tried 1920 and 2560 px widths so far

xilli

6/24/2024

focus-visible not properly working on inputs

Hey. We are currently styling an input element and we try to show the outline when the user navigates by keyboard. There is the selector :focus-visible for that. Unfortunately it also gets triggered when we navigate by mouse. I’ve found out, that is a new and intentional behavior for inputs. Buttons and links work just fine....

Stephanie Dennehy

6/24/2024

Help removing horizontal scroll

I coded this website from a Frontend Mentor Challenge. I cannot get the horizontal scroll to go away. I have tried overflow: hidden. What am I missing? Or is there a better way to create my ::before elements so I don't have this scroll? https://github.com/Stephanie-Dennehy/Workit-Landing-Page https://stephanie-dennehy.github.io/Workit-Landing-Page/...

Ali

6/24/2024

Any idea how to achieve these animation?

these lines animation are now quite trendy, I don't think they do it manually

Dylan

6/24/2024

Trying to make a website for tracking student attendance and behaviour

Hello, I am trying to build a website which tracks Student Attendance and Behaviour. I am wondering how hard this would be to create as a beginner to Web Dev. Thank you in advanced...

theboyduddus

6/24/2024

What is node js and why do we need it

I was hoping someone could provide me with an in depth explanation regarding node js

Vandana

6/24/2024

Math.round()

Steps to reproduce: 1]Cost of item1:$20.95 Cost of item2:$7.99 Cost of item3:$18.99 Cost of Shipping:$4.99...

Justine

6/24/2024

overlapping fixed navbar caused the space at the right

can someon help me out on how to figure this out? based on my title thats my problem

roelof

6/24/2024

Sticky footer

Does anyone know if Kevin has a video about how to make a sticky footer. So a footer which is always on the bottom...

bigdaddy

6/24/2024

Line chart in react

if I'm making a line graph in react how can I make it so that the x-axis is consistent regardless of the number of elements in the array. for example if I had an array of 20 elements or an array of 10 elements. I thought about doing it as having 20 tics but if then were 40 elements each tick would go up by 2 elements but when if I don't have an whole number such as 27 each tick ends up being like 1.35 and I don't want decimals

6/24/2024

Unwanted clipboard behavior flex inline table

Concerning https://jsfiddle.net/a2bsvoer/ Visually I have what I want. However, the linked jsfiddle causes the browser to copy cells into the clipboard with each cell (character) on its own line. How do I make it so that the browser copies full lines into the clipboard? I'm open to completely refactoring with these requirements:...

Hyper Khaa

6/24/2024

Container with image bleeding out while text stays in.

I have a container which max-width so it doesn't stretch too much on big screens. Now I have two columns in which left column is an image and right column is text. I want the image to take all the space available on the left (overflowing the container) and on the right, the text stays in the container (no overflow). How do I achieve this? I have attached screenshot of design for reference.

snxxwyy

6/23/2024

html/css optimization

Hey, what are some recommended tips for improving performance that you can incorporate into your html/css, i've heard of things like the preconnect attribute for font sites etc. Thanks in advance.

snxxwyy

6/23/2024

what should be made into a variable?

Hey, what properties should be stored in variables? I'm aware of things such as colours, things regarding fonts (family, sizes, weights etc) , spacing, and i occasionally store border radius, leading and kerning values if i have a few different sizes with hierarchical naming conventions e.g. x-sm, x-md etc. Is there anything that shouldn't be a variable? Perhaps a rule of thumb or something? Thanks in advance.

joey //

6/23/2024

why is my html/css layout behaving this way?

to preface, i've already figured out the fix to this. I'm still curious though as to why the elements are laid out this way. why did 3 of the empty divs get their own row, meanwhile the other 3 are hidden behind the row of images. Also, what did the empty divs even base their 100% height off of ? thanks. https://codepen.io/Joseph-Huff-the-scripter/pen/bGyMvJr...

Piesz

6/23/2024

What is the best practice for responsive font resizing?

So, as far as i know I should use the rem unit for fonts to not interfere with users preferences. But what should I use for dynamic font resizing? Like there will be a difference between the size of the font on desktop and on a mobile phone. AI suggested to do something like this: font-size: calc(! * @) Where: ! - default size like 1.5rem etc. @ - scale factor determined by the vw unit. Something like 0.5vw etc....

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