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

Need help in tricky css design

As part of my practice, I am currently working on a CSS challenge that involves a particularly tricky design. I have attached an image of the design I am trying to achieve. Despite my best efforts, I have been unable to replicate it successfully. I would be immensely grateful if any one could provide some guidance on how to achieve this specific design. Your expert advice would be invaluable in helping me overcome this challenge....
No description

Flex vs Grid Challenge

I am trying to get a deper understanding of flexbox, but I can’t seem to get my head around this situation. How to modify the text wrapper while still keeping its display in flex to have its height defined by its children? I would like to know how someone with deep understanding of flex box would solve this so I understand it better. Watched many of Kevin's tutorials and read about it which helped a lot, but in practice, there are still some tiny details that slip my mind. https://skala.instawp.xyz/flex-vs-grid/...

How can I ensure that the container is at least as wide as the longest text?

I have a navigation dropdown menu within a container. The HTML and CSS code provided is meant to display a language dropdown menu. However, I'm experiencing issues where the container's width doesn't adjust according to the length of the longest text inside it. I want to ensure that the container is always at least as wide as the longest text and that the entire text is visible. How can I achieve this with the given code?
Here is the code: https://jsfiddle.net/rn8z6swk/1/...

border-radius not applying to container element

I'm having trouble with applying border-radius to a container element in my CSS. Despite setting the border-radius property, it doesn't seem to be taking effect. Here's my code: https://jsfiddle.net/6w3a9sv0/1/...

difference between em and % for font size, anyone know?

For example font-size: 1em; vs font-size: 100%;

Convert videos to webp/gif for hero background loop or host the video on cdn?

Hello devs! I just have a quick question. I want to start coding a hero with a video/gif/webp animated background. I have video files of what I'd like to use, but what do you guys use to convert video to gif/webp and optimize it while keeping the quality somewhat decent? Or should I just keep it a video file and host it somewhere?

vertically centering the hamburger and logo in the same line

https://codepen.io/saidmammadov11/pen/ZEdLmjY especially on smaller screen sizes its not perfectly aligned as u can see from the picture im not satisfied by it i would really appriciate it if anyone could give a hand!
No description

Page alignment and formatting doesn't render correctly when I push it to the website.

You can view a pen for it here: https://codepen.io/Miles-Muehlbach/pen/PorWydm, Which is what it's supposed to look like. However, when I push it, the centering is all off and the secret button is visible, which you can view here: flightsuitsystems.com I've already tested on multiple browsers so I don't know what to say....

Event listeners not attaching after an operation on the page

Hello, for some reason when I use the search field or add a cyclist, the element gets added to the page but the show details and delete button doesnt work. They work on reload however. It's an even listener issue but I tried all sorts of things but doesnt seem to be working. This are the buttons: ``` <button sec:authorize="hasAnyRole('ADMIN','USER')" th:text="#{cyclist.text13}" class="btn btn-primary show-details-btn" th:data-target="'#cyclistDetailsModal_' + ${cyclist.id}" data-toggle="modal"><i class="bi bi-eye-fill"></i> Show Details </button>...
No description

Why does a horizontal scroll bar appear when i set the width to 100vw?

https://codepen.io/saad-shehzad-the-bashful/pen/NWZdMmR you can check my code here its a mobile issue like i dont want the scroll bar i can just use overflow-x hidden but it just doesnt center and its not the best practice so what to do?

How to Create an Image Slider in HTML CSS and JavaScript step by step || Image Slider

How to Create an Image Slider in HTML CSS and JavaScript step by step || Image Slider : https://youtu.be/zJCTMw1b2cs Like Share and Subscribe My YouTube Channel : @WebDevXpert...

How to render multiple button with different bg color

Hey guys , hope you doing well. I started to study react and to not only focus on the theory I’m starting to build something. I wanted to render multiple buttons (given an array with names in it) but each with different colors: the colors are 2 and should be seen as 1-2-2-1 . I did the first part, rendering 4 button with each a name contained in the array but I really can’t think of how to set the color… I was thinking to use a useState , but I’m making more confusing and here I’m asking for yo...

Thoughts on how to make this bottom part?

nutrition part is confusing me how do i make it?
No description

React and Redux E-commerce

Hello everyone i have an issue with my ecommerce shop when i add items to the cart from my normal page they are adde, but when i try to increase or decrease their quantity i cant i should press addToCart, down below i will share mycode and liveDemo! https://github.com/Anes039/Test Demo: https://38pnml-5173.csb.app/...

Extra button space out of nowhere - where is this padding from?

Hi, I'm a beginner and I'm working on https://expertphotoshop.ro/ mobile version. The two buttons seem to have some extra space on either side, especially on the left side. I'm comparing them to the text above and there are about 3-4 pixels on the left side and about 1-2 on the right. I can't seem to find this padding anywhere in the code via inspect. Can you point out where is the padding coming from? Thank you!...
No description

can someone help me?

hi, i wanted to ask help for the jquery with stimulus with this small project of mine because I've done it good at large screen however in small screen like tablet it did not went pretty well when i tried to next it and prev it. i wanted to have a 2 cards shown on tablet and when i hit the next button the 2nd card should fully show and the 3rd card should be visible by half and then agin when next button is clicked the 3rd card fully view and 4th again by half and soon. here is the code https://...
No description

Which JS show menu approach is more efficient / cleaner to you?

Watching a responsive design full site build because I am TERRIBLE at mobile first and this guys attempt looks sorta verbose to me but I'm not really the person to be talking semantics so I wanted you all to gauge these -- first one will be my approach and the second will be what the guy in the video does: ```js const burger = document.querySelector(".hamburger"); const nav = document.querySelector(".nav");...

FOUT

Apart from using system fonts, is there any way in 2024 to avoid FOUT while keeping Lighthouse happy? Inline SVG fonts subsetted for the critical content, maybe (so that the font initially used e.g. for the header's title only contains the dozen or so characters of the title) ?...

React --> One horizontal scroll bar to handle a multi-div timeline

I'm trying to make a timeline that has multiple rows: [Group A Div [Div A Title here]: [Div A with multiple elements inside] [Div B Title]: [Div B with multiple element inside]...