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

Fitting an image in a div, when the div doesn't have defined width/height

Hi everyone. The issue I sometimes face is that lets say i have a grid of 2 cols 1 row. on the left side i have text content and the right side is a div with an image inside. If I want the height of the grid to be determined by the text content on the left side, and I set the image to 100% width and height, what ends up happening is that the image expands the grid and determines the grid's height. The only way I can avoid this is by having the image as the background of the div instead. What would be the better approach if I want to use the image?...

Debug disappearing elements

1. open https://www.telerik.com/kendo-angular-ui/components/menus/menu 2. hover on menu, suppose i'd like to debug the inside of the menu, how can I do that? I have this enabled as well:...
No description

Few TypeScript issue with a Nuxt3 app I'm trying to build, not sure how to fix them correctly..

https://github.com/callum-laing/daily-push First issue is session.value not acception "Session | null" to type "null", not sure how I fix that? LLM's suggest
js const session = ref<Session | null>(null);
js const session = ref<Session | null>(null);
but I'm not sure I trust that as it looks... odd.. Second issue is "any[]" not being able to assign to "never[]"...
No description

JavaScript

Please is it normal that I will forget some things I learned on JavaScript as I am studying it And if I encounter such,should I start afresh or continue the where I stopped...

Help with background colors and more

Hello, this is my chat app like discord, with posts feature. do you think a darker background color for the content in the center would be better? or is this fine? Something looks off :( Thanks...
No description

Correct tab order in login form

Hi everyone, I am implementing the following log-in form. I want to improve the tab-order, because currently it goes email field, forgot password link, password field. My markub looks like this (don't mind the Angular nonsense): ```html <div class="my-app-form-row"> <div class="my-app-form-row-label-with-hint">...
No description

Grid Template Areas

Hello, what should I do to insert 3 divs in the 3rd row? Should I just add 2 divs and then put diplsay grid on "other"??? ```css display: grid; grid-template-areas: "header header"...

Social Media Link Semantics | NAV or not

Hello! It's very common for a footer or somewhere on a hompeage to have a list of social-media links. I was wondering if it is semantically correct to wrap these in a nav tag or if the nav element is only for internally navigation. Option 1?...

Grid

Hola, I am learning grid from mozilla docs. I am confused about this:
Now the <header> and <footer> are set to 1 / 3, which means to start at line 1 and ends at line 3.
What does it mean that we are starting at line 1 and ending at line 3, for me line == column? I defined only 2 colums 1fr 3fr, how can they use 1 / 3 which means going from 1st column to third column...

Help with Integrating keenthemes UI and tailwindCSS in a react project?

Question hey guys so im kind of struggling to integrate tailwindCSS with react and keenthemesUI after they changed their documentations so currently i dont have a tailwind config file and only have a vite config file ...
No description

typescript narrow type on throw

I have this code here ```js const SALT_ROUNDS = process.env.SALT_ROUNDS; if (!SALT_ROUNDS) throw new Error("salt rounds not specified for bcrypt");...

design feedback on my casino game/announcement cards. i did something different.

yo i'm back, the project is almost finished i just have to finalize this cards/thumbnails. so some context why i decided to go for colorful cards it's cause every casino has same kind of cards and gaming companies also use same thumbnail for all the casino's as it's the same game (talking bout slots e.g : sugar rush) but i wanted to do something different. as it's a luxury casino, other aspects i loved it and i'm super sure bout my design but i'm not super sure bout this cards so i'm here to collect the feedback and review. if you have suggestions feel free to give me i would really appreciate it. 3rd image is the stake's for reference. my images are there just for you guys to see i didn't put it on website design like that. the text underneath just to indicate which card is for which....
No description

Header + Hero Layout Problem

Hello! I've been spamming front-end mentor projects as I'm a self-taught coder and lately in the projects I've been having a difficult time with the layout of the header + hero section, specifically when the background image is included in both. I will provide a screenshot of a design from one of the recent projects....
No description

Need help/advice in customize a Github for a website.

Hello I made a blog website a few months back and I need help on writing a readme document in Github for it. I don't know what I should include so I am open to suggestion on what people usually write in their Github. I think I heard somewhere that said a readme for anything application is essential but I am fuzzy on the details so any videos/explanation would be greatly appericated.

firefox button color not correct.

So i been making a little project, and i decided to use buttons over divs for accessibility. Plus I happen to like the colors from google. So i tried to reset the styles and reapply to firefox, but something strange is going on. Chrome's color im trying to emulate(pretty much just the border color):...
No description

How to use em and rem

Hello, small question, I know the difference between rem and em with rem being based on font size of root element while em is based on font-size of current element. The thing is whenever I use them, I use them interchangeably, like I don't really know where it would be better to use em or rem, just what came to my mind I put it there. The other thing is the value used together with them, I don't have a mental image of how big would my padding/size become. For example, say I need a padding, I will just write something like : padding: 2rem, I don't really know how big 2rem is and if em would be more appropriate here....

Can we include an anchor tag inside a button or vice-versa in HTML?

Hello, say I need to style a link that will direct me to another web page. My question is can we have a button and inside that button have an anchor tag? Or we need the anchor tag to stand alone and style it?

CSS transition on <dialog> backdrop-filter

Hi! I have managed to add a backdrop-filter of blur to a <dialog> element, but I cannot seem to figure out how to fade it in. One StackOverflow thread mentioned using opacity() but the below CSS just snaps in the blur (And it seems that Safari doesn't support the :open tag so that isn't great). Any help would be appreciated :) ```css dialog::backdrop { transition: backdrop-filter 2s;...

CSS 👉🏼 I don't know why *::before and *::after are included in the "box-sizing: border-box" reset

I know that box-sizing: border-box makes our lifes a lot easier. I've always just used the * selector, but: ```css *, *::before,...