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

FROSTYTIPS

11/15/2024

Scrolling to an element on the same page - screen size issues

Hi all, I'm creating a navbar that scrolls to items on the same page, i.e. 'contact' will scroll to the #contact section, 'about' to #about etc. I haven't started yet but I remember this being messy, having to implement scroll-margin-top/similar js solutions when the snap was off slightly - this would get even messier when having to accommodate for different screensizes. ...

snxxwyy

11/15/2024

dl vs ul/ol

Hey, could somebody please explain the difference between a description list and general list and common use cases for a dl? Is the only difference that dl should be used for list items with a description? Thanks in advance....

forlorn_died

11/15/2024

User info across pages

I just want to ask an advice on how to consistently have the users info across pages, in my ways currently on each page/component I query on database to get some information, and just pass the idea of the user for querying, so maybe there could be another way

Faker

11/15/2024

Cookies, Sessions and Tokens

Hello guys, sorry to disturb you all; I'm trying to make sense of those terms but they are not that clear. From what I have understand: - Cookies: Use to store some data like user preference (like dark/light mode) - data persist even though browser is closed because data is stored on local machine; this has an expiry date. - Session: Use to store data while the user is browsing; keep track of what user is doing such as logging in/shopping etc. (I'm still confused about that though, when we say keeping track of what user is doing, this seems vague)...

Raheel

11/15/2024

Using different resources to style pages #

For styling HTML/web pages, can we use different libraries/resources at the same time? For example, we may like to use navbar from bootstrap and use tailwind CSS to style other components and at the same time use pure CSS for other components on the same page. Will this be possible or will it create conflicts?

Simon

11/15/2024

CSS – building a cohesive spacing economy in website projects

This is a principle and etiquette question. -# kind of like the mobile-first topic A thing that bugs me with every project is setting ground stones for default CSS properties that come with HTML elements. Do I eliminate all vertical spacing, do I only remove e.g. margin-bottom, on which elements do I remove them, how do I deal with first- and/or last-child ~...

snxxwyy

11/15/2024

inset behaviour

Hey, I have a position: fixed; header and a .wrapper class for this example. I wanted to center the header on the page with the inset property (top, bottom, left, right works too). However when i use inset: 1em auto 0 auto; which i assume to have the top, bottom, left and right order, it doesn't work, instead i have to do inset: 1em 0 auto 0 which doesn't make sense to me. the 1em is to space it from the top of the page but since i don't want any space at the bottom i would put 0 instead of auto but that stretches it for some reason which also confuses me. That only works if the .wrapper class is directly applied to the header. If it's wrapped in it my flex on header doesn't work and the content seems to get really long if you hover over it in dev tools. I'd appreciate any help explaining this. Thanks in advance....

vic

11/15/2024

how to calculate border values based on height and width in css for loaders

https://codepen.io/Vicky-clowdy/pen/GRVeYqy In this code i set 50px for height and width and set 8px for border So currently I create basic loaders for my project in react as re usable so I can reuse ...

Lexi

11/15/2024

CSS Grid not resizing on media query with new grid-template-columns

Full disclosure: I'm working in react using react.modules.css file structure. I originally set up my grid-template-column as 1fr 1fr auto 2fr and I'm trying to change it to just a 1fr 1fr structure at smaller screen sizes. Not entirely sure what I'm doing wrong. https://cherished-moments.vercel.app/ current deployed version of the code....

Jono Lewarne

11/14/2024

Could these scalable backgrounds be made with css?

I'm pretty inexperienced with css backgrounds and it always amazes me what people who are experienced with them can create. So I'm curious whether the top 3 shapes could be made in a way that easily scales to accommodate the content like in the two examples beneath the 3 shapes without the need for magic numbers etc

smackalpha

11/14/2024

How to make text color adapt to progressbar

I am making a custom progress bar. In the center of bar, text is center. As the progress fill, text color should be black on filled side and white on unfilled side. is that possible? i have attached the figma image and my output image. I dont know how to make that text color change based on background. Can anyone help me Codesandbox Link: https://codesandbox.io/p/sandbox/react-new?utm_source=dotnew ...

FROSTYTIPS

11/14/2024

Responsively fitting text to full width of container

I want to create a title where the font size dynamically increases/decreases to fit the full width of the container, which also responds to changes in screen size. After poking about on stackoverflow and not really finding a one size fits all solution, I'm wondering instead if there is a package for this? Thanks a lot!...

Samson Ameh

11/14/2024

What approach can I use to achieve this using tailwindcss in my react project?

I have tried using positioning but the spacing between the contents and shapes are not matching the design especially when I tried designing for the tablet screen size. Thanks in advance for your assistance

Dev_HK

11/14/2024

why isn't overflowX:hidden isn't being applied when toggling device toolbar

so i want to test the design breakpoints so that i can apply the different break points; but something bugs me; the device toolbar (the thing that had a laptop & mobile icon in the chrome devtools) isn't respecting the overflowX:hidden; rule applied in body; i wanna do responsive but i don't know how to do it if i can't focus...

Ullas Kunder

11/14/2024

need help with radial reveal animation like example

I tried to recreate this radial animation but not able to achive the exact style can any one help me with this please https://codepen.io/Ullas-Kunder/pen/rNXRxgB...

Nathant

11/13/2024

Can't center the display: inline block;

I tried a lot of combinations of CSS parameters, but none of them gave me the desired result. The task is to automatically center horizontally. navbar-menu class relative to the screen or navbar. Since the code is small, I couldn't think of anything better than to send it all for the full picture. The classes you need are listed above. I don't speak English well and use a translator. Questions about the wording are welcome https://codepen.io/pen?template=eYqxXrM...

usama

11/13/2024

Component being rendered with a different height than figma design

Guys am working on this challenge: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H here's my code link: https://github.com/umwebdev/qr-card-component here's the live preview: https://fem-qr-card-component.vercel.app/ ...

rnrnshn

11/13/2024

Slider with visible sides on the left and right

Hello guys. I need your help pls. I need to build a slider with partially visible sides like the apple one on this link https://www.apple.com/ How can I do that. I have tried creating with some chatgpt code when I add on my website its not like the apple one. https://corporate.kabum.digital/...

rnrnshn

11/13/2024

Position the image to be fully visible in the viewport and disappear on scoll

I have this mascot... I want it to be fully visible on the viewport but when I reach the green grass it should go along with the grass. I managed to have it go with the grass but I am not able to make it fully visible. I tried position fixed but it remains fixed when we reach the end of the container I tried with js but still no solution....

vic

11/13/2024

how to make this column as straight in flex

So I want all the contents in same direction https://codepen.io/Vicky-clowdy/pen/YzmBLgQ...

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