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

Overflow: hidden;

Hey everyone, I found my question asked on stackoverflow. Basically, I am trying to put an overflow: hidden on body but to do that I need to put overflow: hidden on the html element also. But when doing that, on page refresh 50/50 chance I get a black screen, anyone come across this issue before?

I'm watching youtube tutorial ABout VUe.js but im getting these errors

can somebody help me why im getting these error , it is prob the link that i added for vue.js or idk

lint-staged, npx installed on every run

Hey folks, I setup the lint-staged to run in a pre-commit every time I commit some changes but the issue I have is that it every time downloads/installs "npx" when it is executed as you can see in the image uploaded. And this installation is taking a lot of time. ...

Help ironing transition from Mobile to Desktop version? (especially images!)

Project link: https://elaborate-sunflower-107ab4.netlify.app/ What was supposed to be fun little warmup project, turned into frustrating mess, due to my age old bane - images! I'm having a lot of problems smoothening transition from mobile view to desktop version. Do I add images as <img> do I put them as "background-image" in CSS etc....

How to make a border like the picture below?

How do i make a border like the design here. I thought of making a div, giving it height and width, putting a gradient in background and the eventually use absolute positioning. But I'm not sure if that is the best way to do it. If anyone has a better idea, pls let me know. P.S -> I've seen border gradients but the top border has no gradient so I'm not sure if that can be used or not...

Webpack5 and production

I'm using Tailwind, vanilla js and webpack 5 - I was just wondering what different config settings I should be adding to my webpack.prod.js? I used to use different file compression, and minify css, but with Tailwind/postcss I'm using nanocss and webpack 5 now marks images as type: 'asset/resource' so I don't use the loader I would have compressed the files with. I assume it's doing the work in the background. My prod config literally just looks like this: ```...

Is there a good way to resize checkbox and radio button inputs for Safari?

I need to double the size of the checkboxes and radio button inputs for this design system project I'm working on. I'm unable to find a solution that works across all browsers (Safari is giving me grief). My markup's pretty straight-forward: ```html <input type="checkbox" id="foo" />...

position:fixed problem

So I have a grid, 1fr 1fr 1fr and i want the first grid position fixed. But other grids start overlapping when I change the position. Is there a way to work around that?

Prevent click from bubbling to parent

Hi, I have the following structure: ```html <div> Categories <a href="/">x</a>...

How to mix behaviour of bootstrap buttons?

I am want to keep the default bootstrap buttons as they are but on some places I need to customize their behaviour for example I want to have button primary by default but on hover I want it to act like button outline primary, I tried ```scss .my-custom-btn{ @extend .btn-primary; ...

Hover animation

I'm trying to achieve the hover animation of color which is on the hero page. https://www.ellenasm.com/ ```html <div class="wrapper"> <span class="char">P</span>...

unexpected behavior

could someone explain to me why when i add overflow-x: hidden to the parent, the headers won't be sticky anymore? https://play.tailwindcss.com/CXjWX5tkZb

creating line next to text

Hey. Maybe you will help me what is the proper way of designing something like this. Should i create another component just for designs or download it as image?

How to hide some of my files when uploading my web?

I did upload my web on github and bought a free domain using a student discount. But suddenly I dont know how to hide this files and I want that only index.html is showing on the Sources in dev tool. How can I hide some of the files?

Having a button behave like a link inside a paragraph (wrapping text)

I've been trying to accomplish something for some time now, but can't figure out how to do it. I have a paragraph with some text in it. At one point, I want to add a button (which opens a modal). The problem is, I don't want the text to break to a new line. I want it to behave like a link. I've tried display: inline, different types of white-space, overflow-wrap and so on, but nothing works. I've even tried to compare the computed CSS between the button and an a tag, but can't seem to fi...

Image shrinks, icons don't

Hi guys! There's a problem with my navbar. I have a logo <img src="QuickCart.svg" alt="logo" /> and couple of FA icons in my unordered list. When I make the window width smaller, image shrinks down up until the point it's not visible anymore, while icons remain the same size. How can I make everything shrink? I mean, both the icons and the logo.Here's my JSX from Navbar component and couple of pictures: ```tsx <nav className="flex items-center py-4 px-12 relative shadow-md w-full">...

Wrapping text around image issue

I'm missing something here ... Why isn't the text wrapping around the image with shape-outside on these two images? https://codepen.io/amarlong/pen/jOppwwr...

how to create this "popup"

not sure if that's a popup, but how do i create something similar to that? you can see it more clearly here: https://www.harvard.edu/programs/?degree_levels=undergraduate just click on one of the programs below and it should appear...

Alter letter spacing to make text fill screen width

In the image attached (designed in Figma), my font has letter spacing set to -6%. I was wondering if there was a way to make text fill the screens width (and with an offset) with vanilla CSS depending on the screen size, or maybe using JavaScript.
[On a mobile device in portrait mode, the words would be on two lines but I understand how I could do that. The font in use is Inter]...

Colour selector idea

I was playing around trying to come up with a colour selector, when I thought of something (explained in the diagram below). Would it be possible to make such a thing? I can't think of how, though. The text needs to be simple html, but trying to do a theme switcheroo would mean slanted divs or something?