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

elhanan

7/30/2023

Fit background image vertically and horizontally

Hello guys I am ashamed that I am still struggling with fitting background images in both directions (vertical and horizontal). I have used background-size: cover; and it will strech the image in both direction, but what I am not liking is, my image cuts off in bottom and I don't like that, I have an image with Full HD size. I just wanted the whole part of image to be shown regardless of size of the screen.

snxxwyy

7/30/2023

beneficial option

Hey there, i'm trying to recreate this design. I was wondering if setting a fixed height and width for the animal images would be the most beneficial option as the size only alters a small amount per device view. I know setting a fixed height and width on containers is mostly a bad practice but as i don't have any child elements that dictate the height and width of the divs containing the images i'm not too sure on the best option whether that be setting a fixed height and width or using a perce...

beans

7/30/2023

how to upload my react files to github

^^^

Lia

7/30/2023

Logo Issue

The logo is too small. I want to make it fit in the navbar.

ucheszona

7/30/2023

SVG as background image to fill entire container

Hi, I’m trying to get this image which was saved as an SVG to fill the entire background, I’ve tried setting the background size to cover/contain but still won’t work. Here’re the CSS code .testimonial-section {...

Nikita

7/30/2023

How do this instead of this with prettier?

  <Image className="w-full object-cover object-center" {preview ?? ""}
  alt="Placeholder Image" {600} height={480} />

  <Image className="w-full object-cover object-center" {preview ?? ""}
  alt="Placeholder Image" {600} height={480} />

instead of this...

Alex

7/30/2023

How to center a grid-item horizontally within grid-container when item doesn't span the full width

I a have grid-container with 8 even columns. I then have 2 grid-items. the first having a span of 4 columns, the second 8 columns. That forces 2 rows which is what i expect and want. The first one is aligned on the left (spanning half, this is the one i want centered) The second one does of course span the full width, therefore no need for centering....

roycwilliams

7/30/2023

How to trigger animations on visibility and scroll

Hey everyone, it's a simple fade in animation but it's not triggering the elements with their own animation. Can someone explain to me how I may fix this? I've provided examples of my issue as well: HTML ``` <div class="project">...

Nikita

7/30/2023

How set up github checks?

I want everybody to run pnpm lint before merging to 'development' How I can do this?...

Aditya Kirad

7/30/2023

how to visually hide a text for people which are not screen reader

So in this video of kevin https://www.youtube.com/watch?v=HbBMp6yUXO0&t=86s&pp=ygUiY3JlYXRpbmcgYSByZXNwb25zaXZlIG5hdmJhciBrZXZpbg%3D%3D he created a button and added the text menu and a background-image to it and after doing this he added the sr-only class due to which for normal people the text was hidden but we can still the background-image and text was still there for screen readers but in this video he didn't show the code he used in the sr-only class...

Nox

7/30/2023

Variable function parameter

I'm trying to figure out how to pass a parameter in a for loop, like so: `for (let i = 0; i < mainhaul[0].length; i++) {
createSingle( co2cols, 'Distance',...

Essay

7/30/2023

How to make API calls to different environments?

Hello everyone, I am developing a small website using vanilla HTML, CSS, JS. In my JS files a make a couple of api calls using the Fetch API, but I need to change the base path when I am running locally (from time to time I need to call a local instance of the backend), test or prod environment. I did not find a good way to handle this situation, is there anything I can do? Also, I'll need to put the whole thing in an Nginx container and serve it from docker, is there any way I can deploy the same image in every environment? Or am I tied to having an image for every environment for the sake of changing the base URL?...

Alexandru Stanciu

7/30/2023

Resources for animations, 3D images and stunning effects?

Hi to everyone! I'm searching for new resources that i not discovered yet about animations, 3D images repos and css effects to apply to my projects. If you have something interesting please put some info about....

DrizzyDrake

7/30/2023

JS Geolocation provider did not provide a good position

Uhh so I implemented code a while back that used geolocation and it worked then but now it throws a GeolocationPositionError that the message is Network location provider at 'https://inference.location.live.net/' : Did not provide a good position fix. with error code 2. This is a snippet of the code (yes, the code runs after user input): ```js...

andystevenson

7/30/2023

Tricky nth-child

I have a long list of elements. Using nth-child for example I want to select elements 2-4 6-8 10-12 ... how would i do it?...

Brightie

7/29/2023

Reformulating + check for if correct

Soo I wanted to know if the code I put in image is correct (I am not yet in the position where I can test my code, I am still busy writing the file it's pulling the data from) it should basically check an array pulled from a JS-file with data and compare it to another array (Being the choices made by the user) and see if atleast one of them match, if atleast 1matches it passes the test and it'll go to the next test, this is to ensure that the bingo won't have duplicates and won't have impossible options) However, for some reason I have a feeling Imay have written it wrongly or that there is a way to write this so much more compact, it doesn't feel easy to read anymore Can anyone tell me if the code indeed does as I intend it to do and if there is a way to write it differently so that it is more readable and accesable...

TheNoviceTrader

7/29/2023

How does margin-top: auto; work?

Hey All, I was looking for a solution to keep my footer either pinned to the bottom of the page or the content, whichever is greater, and found the following solution. It works, but I can't wrap my head around why

margin-top: auto;

margin-top: auto;

is working the way it is? When I don't have enough content the margin-top is some calculated value, and when the content is bigger than the page the margin-top is 0....

Jeff_Fairchild

7/29/2023

Calculator not working on mobile

The embedded calculator is only working on pc and not on mobile. The website where the calculator is: https://www.freetrial.automatedsystems.net/ ...

Pat66

7/29/2023

transparency on a part on div

Hi everyone I want realise an effect of transparency on a part who get a number on a picture . is it possible on css ?...

Oxymoron.html

7/29/2023

Responsive Header issues

Hi guys , i am new to web dev , and i am just facing a responsiveness problem for my testing header , when i set the mobile view , the header is just messed up and cut off from the right without filling all the browser width. please check the pictures and the appropriate code. N.B : i tested to make the width to 100% in media queries header{...

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 🙂.