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

Button texts won't allign with each other

As you can see in the pic, option C is slightly leaning on the right (i'm not even sure if others correctly alligned). What's causing this?

I am a .Net Developer and was wondering if any of you awesome folks have done anything with Blazor

I am creating an online training portal using Blazor Server Components partially and the rest oft he app is MVC. If anyone has any tips on UI Development using Razor I would love to absorb some info. Please add a tag for Blazor

Should it all be grid?

Hey Guys! I am learning and creating my very first website for my family's company. As you can see on the image attached, the whole website has a fixed column based on the logos's width (making the layout like two columns). I am wondering if the whole website should be grid or only the specific sections? Thanks, Andrew

RESPONSIVE Feedback page

I am making a responsive e commerce website but I am facing a problem with a page. I am unable to make it responsive after 600px. I am facing some problems in the width and text area. If somebody knows how to fix it, please help me !! https://codepen.io/Hamza-Nawaz-the-solid/pen/abQWRxq...

responsive feedback page

I am making a responsive e_ commerce website but i am facing a problem in a page . I am unable to make it responsive after 600px . I am facing some problems in the width and text area. If somebody knows how to fix it please help me https://codepen.io/Hamza-Nawaz-the-solid/pen/RwqVYKp...

RWD not working on iOS

Hello everyone, I'm having weird issue with RWD on a simple page i made for a friend. Section about me doesn't show properly on Iphone (navigation, styling) while it works perfectly fine in devtools. What could be the cause of this? Media queries?...

How to make the following div responsive?

HTML code : ```html <div class="hero__content"> <span class="odd">l</span> <span class="even first">a</span> <span class="odd">s</span>...

pattern attribute not working in Chrome and Edge but works fine in Firefox

I have this input <input id="email" type="email" name="email" placeholder="email@company.com" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-zA-Z]{2,}"> I can write "email@t" in the input and still submit the form while using Chrome or Edge. But when i use firefox the pattern works just fine so the input is invalid if i just write "email@t"...

HOver effect on image

HI everyone can I get some idea about how to make an image grow after the click. Thanks by advance...

How do fill up vertical remaining space?

For display: flex elements, using flex: 1 fills up remaining horizontal space. I used this to make each card the same width. Similarly, using grid and fr units can achieve the same result. However, using flex, how could I take up the remaining height for each card of the container?

react-select: Preventing auto-closing (closeMenuOnSelect={false} ) when option clicked

I'm using closeMenuSelect= {false} property in <Select> but the entire dropdown still wants to close every time I select an option from the dropdown filters GH: https://github.com/nnall/Inventory Filter Component: https://github.com/nnall/Inventory/blob/main/src/filter.js (starting at line 209)...

scss compile

Hello, i donwloaded an website which use following files for styling: main.scss & main.min.css Changes i mke in either of these files aren't reflected on the website for some reason, i already tried compiling it with linux cli tool sass (installed using npm -g sass) this sass tool create a new main.min.css.map and also replace main.min.css yet i still don't notice any change whatsover ...

Grid in Chrome vs Firefox

I was watching Kevin's video about layered card (https://youtu.be/TskEjH6VkSM) and tried to do with him. He uses Firefox in the video and I was using Chrome. Everything was fine until he styles the texts in blue card. I did the same steps as him but my result in Chrome was not the same as his. Then I switched to Firefox and see that the card is as what it should be. The first photo is in Chrome and the other is in Firefox. And here is the code so far: https://codepen.io/ceydatak/pen/ZEmKzZX?edit...

Overlay catches click when clicking the modal

So, I have an overlay with a Modal in the center of the screen. Inside is an input element that has a custom datalist beneath it. All behaves normal. When I click anything in the modal nothing odd happens and the clicks are correctly registered as the item being clicked on (e.target is logical). The modal is a child of the Overlay. When one or more items are added in the datalist, even without adding any additional event handlers, it makes clicks inside the modal register as if the overlay was clicked (e.target === e.currentTarget). I'm out of options since I cannot distinguish anymore what is actually clicked. Even adding a click handler on the Modal with e.stopPropagation() doesn't help, because it doesn't register as the modal being clicked at all. I've tried Z-index as well. This bevior is the same in FireFox and Safari....

how to make this text changing effect

https://www.lekollektiv.ch/?ref=onepagelove I want to know how to make the "hoi!" part that is keep regenerating. Any ideas? Thanks!...

Need help with the layout problem. the content of the main section is going below the sidebar.

Hello guys I am creating a admin dashboard with react and material ui, and for sidebar I used material ui drawer component and which is fixed. and top bar is transparent, but the main section is displaying stuff weirdly. I have three card which i kept in grid, the card is coming from left side so that first card is hiding behind the sidebar. How to fix this issue. ``` import React, { useState } from 'react'...

Stacking Context behavior

I have the following Sass code: ```scss .image-container#water { position: relative;...

How to scroll to section when it have image with dynamic height?

In the first access page, I want the page will be smooth scroll to the second section (my current logic is using react-scroll). In case each section have image, the scroll will stop somewhere between section 1 and 2. I think the image is not loaded yet. But from the second access, the scroll goes to the exact position I expect. You can try the code at this link: https://codesandbox.io/p/sandbox/awesome-parm-j2qy7v?file=%2Fsrc%2FApp.js%3A27%2C21...

Style elements between two headings

I would like to use CSS to select elements that come after h5 headings. However, I do not want to target the elements if their more recent sibling is an h4. Is there a way to use general sibling selectors and specificity to achieve this? Here is an example: https://codepen.io/Jimmy-Revelino/pen/PoxmNQr JS would also be an option, if that opened up possibilities....

CSS Animation changing the background with many images

I have a css animation that uses a lot of images in the transition and this causes problems in the animation due to the number of image downloads that are made, making the animation have gaps