KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

Å Marlon G

12/14/2022

Images not loading in picture element

This is hard to show since my images are stored locally, and so I can't get them up to codepen. But this is what I've coded, and no images are showing ... ```html <picture class="image"> <source srcset="/Frontend Mentor/Product preview card – Frontend Mentor/images/image-product-desktop.jpg" media="(orientation: portrait)">...

Muhct

12/14/2022

CSS Color filter calculator

Hi there, does someone know of a CSS color filter calculator that lets you select the starting color and the objective color? I've found 4 of these calculators but the issue is that you can't set the starting color, only the final color

Joakim

12/14/2022

Next.js can't create static pages

I got this error message I've been working on for several hours. And I can't get wise on it. In my code, I take the params and get the store that matches those params. I feel like it can't fetch the related store. which I find rather strange since well it works so well in dev. I wish I could give more about it, but I'm not sure how to explain it, hoping that someone takes the time to look at the error message. it seems to me, that there is some place it expects and interger and therefore it fails, but it should be wise versa. since I do not call any functions that needs and integer before I got my store....

message.txt

Å Marlon G

12/14/2022

Border radius not appearing

Hi! I've put a border radius on the .content element, but with the image added the top of the image is not applying the border radius. Adding border-radius to the image itself adds a radius to the bottom of the image, which I don't want. The .content element holds all the content (dah!), so it makes sense to me that border radius would work. ...

Sinc02

12/14/2022

Grid col span to the end if a single item exists in a row

Hey guys! I'm looking for a way to span the column of my cell to the end if that's the only item in a row. This is assuming that I have set a fixed number of columns. I have attached a simple illustration in this post. If I have 5 boxes (odd), I want the first 4 boxes (the green one) to occupy one col each and I want the last box (the red one) to occupy 2 cols. However, if I have 6 boxes (even), I want all of them to occupy 1 col each. How can I do this in grid? Or maybe there is another work around using something else?...

san

12/14/2022

Shorthand for JavaScript Background styling?

I really suck at googling keywords. Anyone knows what's syntax of this part ...

iLoveCoffee

12/13/2022

Media Screen

What is the difference between:

@media only screen

@media only screen

vs...

Berserk Guts

12/13/2022

RTL not working in bootstrap5

I installed bootstrap with npm install bootstrap and I am trying to customize it so I am importing the bootstrap file from @import '../node_modules/bootstrap/scss/bootstrap'; but when I tried using ms-3 or me-3 and apply the rtl dir in html tag it doesn't swap the rules. Should I do something to enable it? Because I saw using bootstrap via cdn they provide a bootstrap-rtl.min.css but I dont find a rtl file when installing it via npm...

Berserk Guts

12/13/2022

Customizing bootstrap 5

I added some custom colors in the theme-colors map using the merge function but if I try to use them with .bg- class it doesn't work, how can I make them available?

Aditya Kirad

12/13/2022

need a little bit of help with react and transition

hey folks this is my sandbox link https://codesandbox.io/p/sandbox/new-glitter-uokjyt I have made the two components in this project one is <MainPage /> and another one is <Rules /> currently only I'm using the <MainPage /> in my index page but I want that I should be able to switch to <MainPage /> and <Rules /> as per the attached video...

BimmerG87

12/13/2022

How to add saturation to a background gradient?

 background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);

 background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);

This gradient is inside body{}....

lko

12/12/2022

How to animate translateY with limits

I have this simple setup https://codepen.io/Lko3001/pen/oNyRPrr, and the .shifted columns are translated vertically of 128px, how can I do such that the more I scroll the more the translate value decreases until it becomes -128px? 128 and -128 are the max and lowest value the translate should have, how do I do that?

Gold240sx

12/12/2022

Switch Statement vs Console.log() discrepency.

Hi, I have a switch statement that takes in a function that when it returns true, still goes via the false case route. I'm not aware as to why or how I can fix it? I've created a codesandbox with a built in terminal and details described in the DOM here: https://codesandbox.io/s/epic-lederberg-puf1v5?file=/index.html

Muhct

12/12/2022

Creating a 2-column 2-row flexbox structure

Hi there, how can I create a 2-column 2-row flexbox structure? Here's a pic of what I mean, and also the code of what I have so far: https://codesandbox.io/s/2-column-2-row-pnk4rw?file=/styles.css

Gold240sx

12/11/2022

Regex help

I have a regex I've created here: regexr.com/74b4n. it tests that emails end in .org or uspi.com but not uspi.org I've gotten it to work with everything but the last condition. I could greatly use someones help. my regex so far: /[a-z-]+(?!@uspi.org)((@+[a-z-]+(.org))|(@uspi.com))?$/...

aevitas

12/11/2022

SCSS in React

I've build like 8 small projects in Reacts so far, in every project I just made a new folder (Navigation for example) with a index.js and index.scss, import the scss in the JS file and then style that specific component. I'm making a bigger project now and wanted to seperate my SCSS completely. Just make a folder called SCSS with a global SCSS import file and then make about 4 folders which contains SCSS files for the entire project. I ran into a problem when trying to use a background image.. Now obviously I could just use inline SCSS for this, but I want to use the image in an ::after, which doesn't seem possible with inline styling.....

Avinash

12/11/2022

[Blackjack game] Cannot read property 'append' of null in code and also webpage keeps on reloading.

hello, there are few issues with my code. i tried looking up the stack, it says the function is running before html and also i wanted to implement black jack cards to the corresponding values when the user clicks on hit. when doing so the webpage keeps on reloading. i tried moving the script file below the body in the html still same issue. Any help is appreciated. https://github.com/Avinash-Tallapaneni/Black-Jack...

Aleksandr M.

12/11/2022

Weird space below my page

Hi everyone! For some reason, I have a weird empty space below my page, and I can't figure out where is it coming from. It's definitely not some rogue margin or padding. Even the whole html component won't stretch all the way to the bottom. How can I fix it? I use React with TailwindCSS. Here is a screenshot of how it looks like. I want to toggle between dark and light mode, and this white stripe remains white no matter what I do. It goes away if I just change the color on <body>, but I don't think it's possible in React....

Eighth

12/11/2022

How to make a slider like on this site

Who can throw off or suggest how to make such a slider as the one on the link, otherwise I'm a beginner, I still don't understand well https://fancyapps.com/docs/ui/fancybox/...

iLoveCoffee

12/10/2022

Border not taking Radius

How can I make it look like the attached design? ```html <tr bgcolor="#f5f5f5"><td align="center"><table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr> <td class="cta" align="center" style="border-radius:45px; border:5px solid #000002; background:#d62828; padding:15px 75px; font-family:'Roboto',Helvetica,Arial,sans-serif; font-size:16px; line-height:24px; color:#ffffff; font-weight:700; "> <a href="https://www.google.com" target="_blank" style="color:#ffffff; text-decoration:none; display:block; ">...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.