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

Ævie

6/8/2024

Deployment

Idk what I'm doing wrong, but this won't deploy: https://github.com/General-Evie/food please help🥺...

francis

6/8/2024

How do I prevent the css in home route from affecting the css in another route component

So i have "/" with multiple components and now i will create new route "/simmer". The problem is the css of home route is affecting the component(s) in "/simmer", how do i prevent it? any suggestions or best practices?...

CDL

6/7/2024

Grid layout to cover spacing with Header/Footer/Content

This is my attempt with a very basic layout... I have a flex version which I think is ok, but this is how I've managed the grid version.. https://codepen.io/Laing91/pen/dyEzGLo I realized the elements were stacking without flexbox, so I've flexed the child elements of the grid container so that they default to row and can be spaced out etc.....

sasxa

6/7/2024

Flex layout issue

humans help! I have a layout issue where in this layout divs id3,5 break out of parent div (they are external and I can't style them directly). How do I set this up to work? (green and orange need to stay inside blue) ``` <div id="1" style="width: 100px; display: flex; flex-direction: column;" > <div id="2" style="flex-grow: 1;">...

Bowser

6/7/2024

Wrap grid columns with grid area

See the below JSFiddle, I would like to have the items inside the grid container stack on top of each other automatically at 480px. If you wonder why the heck I would use CSS grid here with the 12 columns, I am creating a website builder app and it basically needs to replicate the drag and drop grid interface. Otherwise I could just use flex box with space between here of course. Thanks in advance....

Freudian

6/7/2024

Projects

what projects can I complete to make a portfolio in 2 weeks

2023graduateinformationtech

6/7/2024

position absolute on flex , grid

Hi for the grid and flex elements is it okay recommended to use position absolute on the parent if it needs to be moved or is it only recommend it to be used position absolute for the child element for flex or grid #front-end

Waggles

6/7/2024

Best practice to use a modal/ dialogue for a mobile side menu?

If you're building a mobile side menu that pops in and out is it best practice to use just a div/nav with all your links nested inside or to use something like a modal/dialogue instead? I'm thinking that with a div you would lose a lot of baked in accessibility that a modal might have for example or does that present it's own issues? Thanks in advance for any tips or advice!

jfmartinz

6/7/2024

Website Not Functioning Properly After Building for Production

I've developed a Recipe website using HTML, CSS, and JavaScript with Vite. During development, everything was working fine. However, after building the project for production, the application has stopped functioning correctly. Specifically, the issue arises when navigating to different pages. For example, on the blog page, the CSS doesn't seem to apply, and the same problem occurs on the displayRecipe.html page where both CSS and JavaScript are not functioning as expected. Specific Issues: CSS not applying on certain pages...

Step Chicken

6/7/2024

Position fixed on image effect

Hi everyone! i wanted to replicate the effect that is on this website on the section that has the multiple descriptors and the images on the left hand are set to fixed as the right side text scrolls by and then the images change. My idea was to just set each image one by one to fixed as the new cooresponding text section comes to veiw but im not sure if thats the right thing to do. https://www.homagames.com/about...

clevermissfox

6/7/2024

not -solved: ClipPath

Problem One: ~~Why doesnt my clip-path on the pseudo element in the top right corner look the same as the hotpink svg with the same path ? the circle cutout isnt in the middle and its squished.~~ https://codepen.io/Miss-Fox/pen/abrwMjq?editors=1100 Problem One Solution...

Vandana

6/6/2024

grid

How can we target the main-grid container grid lines for the grid item placed inside another grid container.(scale upwards)

allocatebeats

6/6/2024

Inconsistent gap on my phone, not in laptop.

I am using Vite for my projects, and adding "dev": "vite --host" to my package.json file so I can see the application on my phone as well. Whenever I try to use grid or flex for a container and add a gap to its children, it looks good on my laptop but not on my phone. I set a 1px gap (also tried other gap values) and the best way to describe my problem is as if some child elements have 2px gap, some others 1px gap, and it looks inconsistent. Tried many things and suggestions from ChatGPT but nothing worked....

tototriou

6/6/2024

scroll-X issues

Hi guys, I followed this guide: https://css-tricks.com/pure-css-horizontal-scrolling/ and managed to get it to work, but the problem is that when I try to swipe left or right on my phone it doesn't work ... I can't scroll when I have a touch screen... I've thought of several workarounds with javascript or buttons to activate the slider, but it wouldn't be ideal if there was another solution....

V3X4TI0US

6/6/2024

NextJS Api Calls

Hi guys, so I am building a simple website with questions and answers and it is in its initial versions. First, I made the backend API using nodejs, express and postgres, watched a tutorial and understood the flow and then added connection pool and so on. My apis are working just fine. I decided to use nextjs for frontend, but I am confused on what is the correct way to make an api call. I watched some tutorials but it still got over my head. Traditional way is to just call the fetch inside the page.tsx where i want to display my data. However, I wanted to use the app/api/route.js method in next js. I assume its called the Internal API. Right now, inside my project folder, I have two folders, client with the nextjs setup and server with nodejs and express api. Now in this scenario, what is the correct way to make the API call from next js while my backend is running on localhost as well. I did read the docs and some stackoverflow questions but I was unable to understand the flow and how I could implement it in my scenario. ...

RaviTeja

6/6/2024

Is it possible to create a dribble effect like this using css ?

https://dribbble.com/shots/3655860-Tripple-Stories-animation

naiden

6/6/2024

Issue with overflowing text

I'm developing my portfolio website and I'm trying to achieve a very minimalistic and typographic design. On initial page load the text has ultra large font-size and as I scroll down the page the font-size scales down. Here's how I do it: `window.addEventListener('scroll', () => { let fontSize = Math.max(32, 300 - 0.05 * window.scrollY); main.style.fontSize = fontSize + 'px';...

o_O

6/6/2024

Setting radial bg but the radial parts are stretching with the page height. Don't want that

I used this website to generate a background with little growing blobs on the edges but as I add content to the website the blobs get stretched. I want the glowing blobs to mainain their shape. Image 1 is how it was generated and image 2 is after I add content to the page. ```css .radial-bg { background-size: 100% 100%; background-position:...

lewmor

6/6/2024

Align Images right in a subgrid

I have a subgrid with a collection of images, I'm trying to right align them in the grid. I've tried grid-column-start: -1, align, justify, nothing seems to work, what am i doing wrong? any help would be great! Thanks <div class="project-content"> <div class="project-copy">...

OmIsCool

6/6/2024

css

I am trying to create this banner. The image has this weird shape. I tried to play with border-radius property but not working properly. What should I try ? Any suggestion would be helpful. I am trying to achieve with CSS only. Thank you !...

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