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

Vanilla CSS: Make flex-wrap always wrap more than one item?

When the screen is wide enough, I would like all elements inside my flexbox side by side. However, at certain screen sizes, flex-wrap just puts one item on the second line, and I don't like the look of it. Is there a way to force flex-wrap to always keep the two rows roughly the same width? Or can I do this better with grid?

Best way to achieve this design?

What would be the option for this design? It's tempting to go down the absolute route but is that the best? https://i.imgur.com/kFGU71b.png...

Allow button to always remain in viewport

I have a URL: https://kasi-web.vercel.app/users/DKBvDQwQAXvFaIUzKmiM. I want the "Pay With Kasi" button to stay at the bottom always without users needing to scroll, regardless of the device. I've currently set the height to 100vh in my CSS, but I still need to scroll on mobile devices to see the button....

Need help adding a vertical scroll on menu items.

I have created a navbar. But if navbar has a long list of items it goes off screen and I am not able to view items at the bottom of the list. If I use max-height with overflow-y: auto the L3 navigation which is positioned relative to L2 item gets shifted inside the L2 navigation with the horizontal scroll. Is it possible to fix it with only? https://apar-test.fynd.io/ Need some help with this....
No description

i have a doubt

so there is this nav bar having multiple buttons can i have different functionality for different pages ? ( in react js )
No description

Multi Nested Menu

What I need to do to get dynamic height no matter how many nested drop presented? The problem is 1. I added max-height dynamically it only work for 2 steps on third steps it got broke 2. I like to have flexibility of adding 4th-5th steps...

element positioning

Hey, i was wondering how you'd place an element like the purple circle in a layout like this, my first instinct was position absolute but i was curious if there was a better way. Would much appreciate anyone's help with this, thank you in advance.
No description

White space after image

I have a image in my website "https://talhamustafa1.github.io/mv.machine-learning/" after the image there is a white space i have tried to inscept it and remove the white space below but could not find anything.I want my image to take 100vh of the screen and there should be no white space below.

New line in a paragraph, expanding height

How do you make a long string of 'aaaaaaaa' fit into a paragraph only expanding height ,without it going over and expanding width ?...

Grid issues

Okay so, I've been fiddling with this for over 30 minutes, trying various things but I just don't get the result I want https://codepen.io/BrightDN-the-sasster/pen/RwEroVO THis is the codepen, basically I need the items in the grid to be square and have the size of the border around adjusted to the size of the bingo (For some reason I'm even failing to get that right lol) (As this is a 3x3, the squares can be a bit bigger just have to make sure it doesn't end up requiring scrolling as Id love this design to work both phone and pc alike) If you look on the codepen, I got them square, but the grid is...Still big, bigger than the items it contains lol...

Wordpress website on github

Can host my wordpress webiste as a statice website on github i am trying to uploading it but only my github index.html file is uploaded to the github other files are not uploaing the size of these files is not more than 22 mb

pause a css background video

How do I pause or stop a background video while I'm working on it in development mode? I'm using Chrome's devtools & used css to display the video with the 'background' css property.

i am creating a google calender clone like calender i need some help

this is what i have got but i want the calender to take the height which is remaining of the whole vh after the nav bar took some height . how can i do that ? and there is an another thing i want to achieve . conditional positioning how can i do that with tailwindcss
No description

space-between flexbox vertically css

How do you do space-between flex vertically css ? I really dont want to use margin

(CSS/SCSS) Syntax Question on Selector Declaration

Quick question for you all: Can you chain selectors when defining a CSS/SCSS ruleset? Or did I wake up with some JavaScript madness in my brain? I wanted to do something like this: ``` header.hero { display: grid;...

regard horizontal scroll-bar

Can anyone plz help me out how to create a horizontal scrollbar with just Html and Css without any use of J.sript.. want urgently working for a client.

Slider Animation help

I'm trying to achieve this slider animation with pagination buttons animation. How can I go about it? Is there any library I can use? If you can please guide me what to search, effect name, would also help....

Color bar - how to approach styling this element?

Hi, Im doing some simple challenge on fem that is create indicator of used data. (picture attached). What should I choose, which approach is best regarding this bar? Should it be meter , progress or just div?...
No description