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

Bootstrap button color not overriding.

I am trying to customize bootstrap button with scss
the problem though is when i set $primary variable the variables like $btn-link-color and $btn-link-hover-color is not working, i had set the primary color to #ffb600 (yellowish color) the text inside the btn-primary becomes black but i want it white also i want on hover the background to be black and text should be that primary color (yellowish)...

What are the most common and important purposes/uses of subgrid?

Hey, what are the most common and important purposes/uses of subgrid? Two that i know of are making content the same size to align buttons to the end of cards and organizing content into their respected tags e.g. elements that should be in a main tag for a project but individually need to be in different columns don't need to be a direct child of the main grid. Ohter than that i'm not too sure of any others. I'd appreciate any insight, thanks in advance.

Automatic scroll with MUI Appbar

Hello all, I implemented a MUI AppBar at the bottom of my page with a Toolbar inside it, because I need a toolbar that remains sticky at the bottom of the page as the user scrolls. The code looks like this. If you notice where my cursor is, when I press enter, the cursor falls out of view until I scroll down again. This is not a huge deal, but is there a way to also automatically cause the page to scroll when the user presses enter to create a new line? ```<AppBar position="fixed" sx={{ top: "auto",...
No description

Customizing editor experience

Hello everyone, I’m working on a e-book maker app where the main feature is a rich text editor inside which authors can write book drafts. I would like to customize the look of the editing experience. Right now, I’m not applying any custom styling to the nodes (h1, h2, …, ul, ol, code, pre, etc.) inside the editor (see screenshot to see what is currently rendered). In order to do that, I would need to pick a custom font, custom spacing between headers, etc. I’m not very experienced with the fro...
No description

native CSS nesting

Hello everyone, I would like to rewrite this CSS to implement it instead with native CSS nesting. My question is if that's smart to do so; it CSS nesting supported yet by all major browsers? ``` /* Editor container styles */ .tiptap {...

"Auto filled" grid not working as expected with subgrids

As stated in the title I'm facing an issue with grids when columns are auto filled and rows are subgrids. I'm not sure if this is me who missed something or if this is an issue on these new grid features. I made a reproduction here => if you shrink your window horizontally :...

What's the best framework for Web Apps vs Static Pages

so I'm working towards making real fullstack web apps as projects, I'm learning React for that, but I feel like React would be overkill for static websites, when I make those, should I still use React, go for no framework, or try learning Vue/Svelte? I'ma learn React since it's dominant in the market, but if I were to freelance in a couple years, what would be the framework you'd recommend me to learn and use?

width descriptors

Is it fine if i dont specify a width descriptor for images in img srcset if I have only one size

Need a curve on top of app bar when selected

I am creating one mobile appbar. I am trying to create a curve above when user selects it.i created another curve div. but that is separate div. so it hasn't worked out. I tried but I don't how to implement it. Can anyone help me with that. I need a curve above when the user clicked on the item Here's the code: ``` import { AiFillBell } from "react-icons/ai";...
No description

HTML checkbox ?

In my html , the checkbox mark colour does not work properly , is it normal or some kind of error , plc guide me...any solution ???
No description

2 "fixed" sections causing gap

Hello, Could anyone help me figure out why this gap is occurring and how to fix it? It is the gap on-top of the slide out menu when fully out, I want the slide out menu to have priority over the header, but there is a gap that forms, and is un-fillable , only fixable if I remove one of the positions "fixed" but then they wouldn't work as intended to. the menu is supposed to hide when scrolling down and appear as you scroll up. the slide out menu is supposed to take up all the screen from corner to corner. Thank you, and I appreciate the help. ...

Target logical heading level with CSS?

In the following HTML, ```html <body> <h1>heading 1</h1>...

position absolute on heading

Hey, i have an icon to the top right of my heading placed using position absolute in this example. When the viewport shrinks, this can leave large gaps between the text and icon at some points due to the text wrapping (like in the image) and overflow too. What methods would ya'll use to make this responsive and flow smoothly with the text? https://codepen.io/deerCabin/pen/zYVqgVY Thanks in advance....
No description

Animate on scroll

Hello, I know how to use animations appear from top, left, bottom, right, etc. But how can I make them only appear when scrolling, most of the videos on youtube use Javascript Libraries, I just want to use original (vanilla I think?) javascript. Thank you https://codepen.io/Eddiev10/pen/jOjqjvB...

What image sizes would you choose for a responsive hero image?

Are there any rules or conventions to follow? I am considering using 2560w and 1920w for full HD and QHD screens, but what about sizes below these resolutions? Which sizes should I choose for smaller screens?" ``` <img ......

Responsive

I made this design using position: absolute on every single element and moved it using top, left, bottom, right, and, of course, it is not responsive. That's what I need help with. Can I do something so that it just decreases in size, like just decreases? I know it will get hard to read on mobile devices, but how can it decrease? That's what I am asking. Any other methods are also welcome to make this page responsive.

Good way to learn more css

Do not know if it's a question for here but with a CLR challenge , can it be wise to use the html has and just get busy with the css On one challenge I do not know if I use the right html structure...

display: table;

Hey, are there any tips and tricks worth knowing for display: table; where it's used out of the context of a table, just like grid is used to center things? Thanks in advance

Drag and Drop API flickering issue

Hey, I'm, facing flickering issues with drag and drop API, I've realized onDragleave also triggers when drop-area's onDrag event enters or leave its children too which is causing the problem. I also can't set pointer-events: none as I've some handlers in children components. Two things which are causing flickering: -> When a image is uploaded or dropped it causes re-render due to useState. -> When dragLeave & dragEnter ...