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

bored

12/21/2023

Bootstrap Grid Doubt

had to make this, so i'm trying to make this responsive layout with bootstrap grid, the green box in medium and large screen should extend as you might already have guessed. But i'm unable to just using the concepts of grid in bootstrap. I do know how to do this with css grid template area and css flexbox but is there a way to do this with bootstrap grids only ?

J0K3RY

12/21/2023

Little idea to start this?

Hello everyone, I am a beginner as a junior dev, here I have a design that I would like to make, I would like a part to have a form of folder and currently I have tried several ways on codepen but none It's effective and I admit that this design is giving me a hard time. Do you have any idea where I could start? A big thank you to you.

Suggon

12/21/2023

Animating `aspect-ratio` property

(this is a simplified version of my earlier post here) Pen link: https://codepen.io/Suggon/pen/NWJKZXE i've designed a two-column image layout with two checkboxes to toggle how the images are laid out. "Merge" merges the two images using translate and "Clip" sets the aspect-ratio of card__hero image to 2/3. ...

Matt

12/21/2023

Preloader w/ JS

Hello, I'm trying to create a preload transition for each time a page is loaded. Here's my code: https://codepen.io/Matt-CopOffMatt/pen/NWJKmbK However, when adding the .hidden class, it doesn't seem to transition as I expected (fade to 0). I thought by adding an element and having transition with css, it would fade out. Does anyone know what I'm doing wrong?...

kaidecoder

12/21/2023

Form2's button controls Form1's input fields.

https://github.com/kaidecoder/form-validation-project/issues

Ganbatte

12/20/2023

Difficulty with Autocompletion for SCSS Variables in Visual Studio Code

I'm facing challenges with getting proper autocompletion for SCSS variables in Visual Studio Code. I have a separate SCSS file where I store all my variables (_variables.scss), and I'm importing them into another file (style.scss). However, despite using @use access these variables, the autocomplete doesn't seem to work efficiently. Is there a recommended extension or configuration to enable accurate autocompletion for SCSS variables across files in Visual Studio Code? Currently, I'm manually referencing variables like variables.$variableName, which becomes cumbersome with a growing number of variables. Any guidance or suggestions to streamline the autocompletion process for SCSS variables would be greatly appreciated!...

h1ghrise

12/20/2023

Skewed Section Seperator - Align with Image

Hi Community 🙂 I would like to use a skewed section seperator in my Hero section. Unfortunately i cannot get it to work, that the flex-item (image) in the flexbox container, inside of the section, is honored with the skewed section seperators. I have created the following codepen to illustrate the issue: https://codepen.io/h1ghrise/pen/ZEPzmEP What i want to achive is:...

Quick

12/20/2023

overflowing div inside grid

Hi, does anybody know why its all responsive and shrinks until a certain point the red box stops shrinking, tho there's no fixed size nor any content inside? playground...

12/20/2023

Why does the content in the div change the vertical position of the div?

I want to make a grid divided into 4 squares each of which can have different content. (I'm not using grid or flexbox as an experiment.) When the boxes in a row have the same content, it displays fine (the 1st image). When the boxes have different content (for example, one has a heading and one has a paragraph) they become vertically misaligned (the 2nd image). I've attached the css and html....

David Secretain

12/20/2023

How do I solve this background conundrum , I'm lost. Thank you for any help

I have a grid section that is 100vh 2 grid items inside, an H1 and a P. I need these centered both vertically and horizontally inside, as they are currently (using place-items: center center;)...

user86345

12/20/2023

How to select an element that doesn't have a child or contains a particular element

how can i select an element in css if it doesn't have or contain a particular element for example ```html <style> /* ...

Hoshi

12/20/2023

GSAP ScrollTrigger pinning jumps to the end of the container

Hi! I'm having a bit of trouble with pinning in GSAP I'm using Nextjs 14 and I'm trying to pin an element and it jumps right to the end of the trigger and then it finally pins, not sure what I'm doing wrong, I've been searching and reading docs and I've tried other things, nothing is working 😢 Here's a simplified example on sandbox: https://codesandbox.io/p/sandbox/serene-williamson-j86cy6...

Shaun

12/20/2023

When do you use <details> and <summary> for menus?

Someone was mentioning these HTML-tags and said they are used for hierarchical menus. Is that true? I never heard about these tags. Do you use them really for website menus? I would have guessed these tags are only used for spoiler stuff and to organize text in e.g. patchnotes, roadmaps and stuff like that. What is your opinion?

Lights

12/20/2023

Need help in positioning button elements.

This is my simple html here: ```html <body> <button> <span></span>...

AdrianRadian

12/19/2023

Astro sass implementation

Hey there. I am trying to recreate by myself this project: https://www.youtube.com/watch?v=IGVWLd3P8ig but I have problem with sass implementation. What have I done:...

Matthew Alexandros

12/19/2023

It is better to use FlexBox or Position for this layout?

I am trying to figure out what is the "right" mthod to use to create a certain layout. I attached a picture of what the desktop look for the layout would be. Basicly a sticky header, two columns but the right column has a footer under it. When it converts the mobile version the sticky header stays, the side bar gets hidden until a hambergure menu icon is clicked then it will slide out, the main content and footer will take up the whole width as normal. Obviously the sticky header needs to be position call but would it be better to use a flexbox for the reset of the segmenting or should I do position calls? Thanks!...

Abulkalam

12/19/2023

SASS Issue in Create React App

I have a react template made with create react app. It has bootstrap and SASS setup in it. I want to change the $primary color. Changing color in .css files does not work. I know that changing anything in SCSS file needs to compile it. I have tried to compile it but it gives a lot of errors related to scss functions deprecations. What should I do?...

KDA

12/19/2023

Nuxt3/Content V2 static site - unable to query data in component?

I've been attempting to fetch some basic content into a navigation component (TheHeader.vue) - using the following const { data: navigation } = useFetch("navigation", () => queryContent("/website/navigation").findOne( Works fine if SSR is true, but I want to generate a static site, and when using nuxt generate with SSR set to false the content doesn't pull correctly into the component? I'm not sure exactly what I'm doing wrong, and the documentation doesn't seem to cover this (Either the nuxt 3 docs, or the content v2 docs)...

sheikh

12/19/2023

Sliding animation not working

the animation not working as intended it is clipping sometimes the element(background) are img elements . the problem seems to happen on this block of js. all the variables are declared (including background.value ones) ```js async function MovePreviousBackground(Left) { const transitionPromise = () => {...

Zerthz

12/19/2023

How do you go about creating things like this CSS or just a svg?

These display sort of a process flow, where each arrow is a step of the process. Also what are the things called? surely there is a name, we name everything else haha

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