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

omarda

6/27/2024

vertically position floated element

https://codepen.io/sos909/pen/XWwQZpN how can i make the a element appear at the bottom line of the div not the top while staying on the right

interactive-harp

6/27/2024

Can't center title - horizontally + vertically

Current result - image 1 Desired result - image 2 Code, HTML: ...

Julianna

6/27/2024

Override Default Border on Input

I am working on the tip calculator project on frontendmentor and I've used :hover, :focus and :active to adjust the border color of the custom tip input box but it still defaults to the blue border when I start typing in both chrome and firefox. Here is my deployed project so far: https://calculate-and-split-tip.netlify.app/ My codebase is here: https://github.com/mathematiCode/Tip-Calculator-FEM I've tried commenting out all of my js, in devtools it shows that the styles in the :focus, :hover selector are being applied but it keeps changing the color to the default blue when I start typing. ...

DavidS

6/27/2024

Not getting informations from a form

I am using web3forms in order to get infro from a form to my gmial but insted of getting the info, i get a blank email, so if anyone knows how can i do this a different way, or what i did wrong would be ameazing thank you...

rg_03

6/27/2024

Calculation of hypothetical main size and flex base size with paddings

So i was reading this article by kevin : https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/#:~:text=always%20the%20case%E2%80%A6-,The,-reason%20for%20this Now he mentions 2 ways to make equal columns and 2 problems with it. First, using flex:1, he mentions that since content-size of all items is 0, we only have 600-32 = 568px to distribute cuz of the padding on the middle element. So, after the padding is added back, middle element is wider. And padding isn't included in that flex-basis even though we used border-box In the 2nd case, using flex-basis: 100%, he mentions that now the padding is included in the flex-basis and now the content-size of the middle item is 600-32 = 568px and of the others is 600px only. So, the middle one shrinks slightly less....

Pi, a future fluent jp speaker

6/26/2024

API returning error and also CORS error

I am trying to use this API, which I found on the website https://random-word-api.herokuapp.com/. The objective is to return a random word for my wordle game. The problem is that it is not returning the grid anymore, when I try to click in any of the options it returns some errors on the console, as shown in the image below. I spotted that the undefined error happens probably because there is no word to generate the grids. I found it weird that it is returning a CORS error, for being backend stu...

snxxwyy

6/26/2024

margin-top and flow utility clash

Hey, i'd like to align the buttons to the end of the cards. I have the elements within the cards spaced out with a flow utility class which uses margin-top. Setting the flow-space on the buttons to auto does what i'd like however removes the space between the paragraph and button on the card holding the most content (and certain cards when the grid items start stacking when the viewport shrinks) due to the way auto behaves and the fact it's overriding the default property in the utility of course. I can't set this on just the first two cards in the example as i'm looking for a more flexible solution as you may not know which card has the most content or how many cards there could be. So from this i have two questions. 1. What sort of workaround/fix could i do here? 2. Why must the container (in this case .card) have to be a flex container for margin-top: auto; to work? If i remove it it stops working. ...

Dennis

6/26/2024

Parent container with child elements position: absolute does not size properly to fit the children

Really hard to put my thoughts into words but I have a container essentially and I have two h3's inside of it which I want to paginate. I have it working as I want but only when I explicitly tell the container its height and width. I understand its behavior because position absolute pulls it out of the flow but that means without explicit width and height my container is a tiny blob. This impacts my reactiveness of the website as when the width of the device increases or decreases text starts to overflow instead of the container adapting to fit the content If I remove position absolute and try to explicitly set the width of the child it doesn't work (I try set 1200px) css:...

Nick

6/26/2024

Positioning within a grid

Just wondering how people position elements within css-grid cols/rows? I know you can align or justify elements, but I'm talking about more fine-grained than that. Say you want to start an element 'x' amount down from its starting row. For example the element in the above image spans 3 rows and is vertically centered, but I think it would look better positioned 10% down from its starting row I could use mt-[10%] on the element to have something a bit more reponsive to the page height, have a nested element with another grid covering all 3 rows, or something more silly, like using flex and a flex-basis of 90% and pushing the content to the end....

Irtal

6/26/2024

I want to create an effect and i dont know how

I'm asking this question without any knowledge in code (Doing only a bit of CSS here an there). I'm a graphic designer who try to learn coding. The effect: So I was wondering how can create the effect in this container: ...

pastilhas

6/26/2024

CSS list-style-type not being applied on <details><summary> on safari

Hey everyone, I'm actually using tailwind but have tried it with css and the behavior is the same: ```html <details class="group list-none before:hidden"> <summary class="cursor-pointer list-none text-xl">...

nookayisee

6/26/2024

How can I make the handle which resizes content bigger. It's too small.

I set my parent up with this CSS but the handle that appears is so tiny that it's barely visible.

resize: both;
overflow: auto;

resize: both;
overflow: auto;

...

empty

6/26/2024

Problem with transition height

Hi guys, I'm trying to hide the tabs on scroll down and show on scroll up but I'm facing this problem. Can anyone help me? I'm using MUI and this is how I toggle the height. ```ts <Box sx={{ display: "grid",...

6/25/2024

Need Help identifying different Semantic Sections

In the picture I provided is that entire piece supposed to be all in the header or the logo and button in the header and the content below it a section? And to add to that is the header section mostly for navigation and titles or can there be just regular content in there?...

Julianna

6/25/2024

justify-self and align-self flexbox?

Do justify-self and align-self not work for elements in a flexbox container? I’m finding mixed info and some of it is 8 years old.

asasinmode

6/25/2024

prefers-reduced-motion is a text color animation ok?

I'm making a text-based browser game and I just added a Wating for player to join indicator when you join the room and it has a wave animation, but I'd also like to take into consideration users with prefers-reduced-motion setting on so I made an alternative for it, where text "shines" through. I'm not sure if it's a good alternative or if it's still too much for users who prefer reduced motion, does anybody know anything about it? First gif is original, second is reduced motion version...

snxxwyy

6/25/2024

grid-template-columns vs grid-auto-columns

Hey, what would be the difference between the examples below? Other than the ability to define a specific number of columns and how the elements fill the container when using grid-template-columns, when using auto-fill or auto-fit these both seem like they would achieve the same thing to me? Any explanation would be appreciated, Thanks in advance.

grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-auto-columns: minmax(16rem, 1fr);

grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-auto-columns: minmax(16rem, 1fr);

...

CDL

6/25/2024

svelte logic (if else) - can you write this in the js? (potential very dumb question)

Basically I want to put a conditional in here so if count is == 0 then the decrement button vanishes (haven’t coded it as on phone).. I figured that’d be a conditional in the decrement function, and if it is do I write it as a typical js conditional, or a svelte conditional? ‘’’js <script>...

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 ""

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