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

CSS HELP

HOW DO I MAKE A RESPONSIVE SQUARE

CSS Grid footer columns layout wrapping

Hey! I’m working on a site for a client and I hit a massive roadblock with the footer. See attached screenshot of Figma design. On smaller screens it’s straight forward, the columns just stack. However, the problems start with larger screens. Here’s my attempt on Codepen: https://codepen.io/Framboos/pen/wvLJewP The first and last columns are static and will stay the same (first has a logo and social media icons, last has newsletter signup form). However, all the columns in between come from a CMS, so there’s no telling how many will there be and how many items will they contain, so the code has to be as future-proof as possible....
No description

Best practice to style standard HTML elements with TailwindCSS?

I am exploring Tailwind atm while learning Astro. TailwindCSS is removing all spacings, sizings and formatting of HTML elements by default, so you can use your own system. What is the best practice to style repeating elements like <p> or <h1> elements when using Tailwind? should I use @apply in my stylesheet?...

Confused why certain elements aren't full-width in display: block

In this example: ```html <div class="foo"> Bar <button>Bazz</button> </div>...

Screen Size Warning Modal

Hello everyone, I am working on a website that will be used almost exclusively on ipads, laptops and desktops. I want to at least warn people who go to it on a phone that it's not optimized for mobile devices. I watched a video from Kevin and another one that both used a dialog element when an open button was pressed. I want my warning modal/popup to come up on load or seconds after it but only for users on a phone. So I have media queries setting it to visible or not visible depending on the screen size. I wasn't able to do it with display none/flex because it was messing with my javascript. Now it's fine on mobile, but on larger devices, the invisible modal is blocking me from clicking any links on the nav bar. I'm not sure of the best way to do this, especially in an accessible way. I know I can use z-index with display: grid, but as I mentioned, display was messing with the javascript to open/close it. Here's a codepen where I reproduced the issue. https://codepen.io/MathematiCode/pen/PorpqGZ You can see the links can't be clicked at larger screen widths because the invisible modal is in the way....

Front end layout

Hello I have been trying to build a layout like this.
No description

bottom animation don't work

Hey ! I don't know why it doesnt work. Can you help me please ? Thx. ```html...

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