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

filter breaks positioning

I recently ran into an interesting phenomenon where applying a CSS filter nuked the absolute positioning and size of a child's pseudo element and made it collapse to its intrinsic size I was wondering if this is a "known" bug/behaviour in Blink/Chromium and Firefox (unexpectedly appears to work in WebKit) or if I missed something fundamental about stacking contexts, positioning, containment and alike that non-WebKit browsers need for this not to break. Here's an excerpt that depicts the issue when you hover the card (left card ok, right card broken):...

Selectors Hell

I am trying to select specific li of the ul of a div which is looking like a hell if they're simillar ones ```html <header class='header'> <div class="inner"> <div class="buttons">...

What nesting is correct?

Please tell me if it is possible to nest buttons in nav or li. Let's say I make a header menu and want to make a burger button, then should I make an additional shell and insert the button there along with nav, or not?

Javascript API's issues with combining geocoding API with openmetro api

context: i have 3 ways to get location. one is by using inbuilt navaigator.geolocation which gives lat and long. second and third option is same with slight variation that is by typing location name in the field input and then either by clicking "Enter" key or click on searchbtn. All are working as intended. The issue is the API (OpenMetro) which im using (cause its free and doesn't require credit card) has few api. one specific Api will return all the weather related information based on lat and longitude but doesnt contain name of the city or country. just bunch of data related to weather...

can someone fix this one for me ? it is made with jquery but can someone fix it without it ?

<script> $(document).ready(function(){ $('.content').click(function(){ $('.content').toggleClass("heart-active") $('.text').toggleClass("heart-active")...

AI suggestion

How can I implement such this auto complete in CSS/JS?

getObjectFitSize()

here the person talking about the getObjectFitSize() but i did not find anything about in on the internet.. any idea what it is???...

Underline animation

hey , I want to add underline transition but its not working https://codepen.io/tribhuwan-joshi/pen/mdGqqYy?editors=1111 using tailwindcss...

How to scroll to a component when the user clicks on any link or button

Hello, Guys I have a homepage where there are some components and each component is having full-screen height. let's say in the hero component on the homepage there is a navbar component where I have some links. What I want is that whenever the user clicks on any link it should scroll to the component associated with it.

How to use position sticky properly on table

Hi, I am trying to position the table headings as sticky so while its scrolls, it will be on the top , at the same time on smaller screen if the user wants to scroll horizontally the first two columns will be sticky on the left, when I apply styling for the same. it collapses . can anyone give me suggestion.

How to center a div without flexbox or grid

Hello! I'm doing this first challenge of Frontendmentor.io, and I would like to know how to center that div horizontally and vertically, so that it fits at the center of the screen no matter it's width or height. I'm all ears to hear possible solutions, thanks!!

How do I style only the text inside lists

How do I style only the text inside lists, I'm using marker on these lists not "::before". And I don't want the marker to be affected at all by it.

one side box-shadow

Is it possible to add box-shadow of any width to an element? I'm watching a tutorial of Kevin. He achieve that using after element and grid areas. I wonder if it's possible adding just box shadow to the before element(before element is the number next to title)

I have a assignment from company that i apply and i don have much time can somebody help me

the things i have to do are in the picture... can somebody help me...

Body - font-feature-settings question.

Imagine you have 2 different variable fonts and want to set different font-feature-settings on body for those 2 fonts, how do you go about it without using classes, you don't have to look at browser compatibility and you can use all the latest css but it has to be supported by at least the latest Chrome and Firefox versions, other browsers are irrelevant so you don't have to worry about that. I wonder if that's even possible using stuff like :where, :is... For those who don't know what exactly I mean, here is an example, so I have my body font settings like this and want to apply the font-feature-settings only to the font family assigned to body, without affecting other fonts. ```css...

How to make a navbar menu fro Frontend Mentor

Hi everyone, I am having a trouble making the transparent menu from Frontend Mentor Challenge. It is not that I don't know how to make it transparent but I cannot match the color in the image. This is their given color: Soft Blue: hsl(231, 69%, 60%) , Soft Red: hsl(0, 94%, 66%), Grayish Blue: hsl(229, 8%, 60%), Very Dark Blue: hsl(229, 31%, 21%). Also, while I am at it, I want to ask about what is the best way to make a navbar with HTML, CSS AND JS. I also want into trouble making nav whenever I code so I want to know the best way to do it....

Letter Spacing on Hover causes Visual Glitching

This is actually for a different website that has some semi unique css/html, but I was able to recreate the problem in a codepen with some specific rules. https://codepen.io/rainbow_blacklight/pen/mdGKyag Here's a video of the error; warning for photosensitive viewers. ...

Chrome extension

Ive created a simple extension for chrome, I'm now stuck on a silly issue. I want to change the corners to rounded corners, is this possible?...

What job boards do you recommend for finding jobs?

I use 3 different websites for web design / developer jobs. 1. Dice 2. LinkedIn 3. ZipRecruiter...