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

using parallax in a grid, is it possible

I have been using grid and trying to apply the parallax effect to the grid. I want to know how to make it work without uysing the postion, absolute

What's the appropriate way to post a paid project opportunity on this server?

Hey everyone, I would like to post a message regarding working with a css/javascript developer on a paid basis in order to create a documentation system similar to Apple's DocC, but more general purpose. I want to avoid going through those weird "upwork" and "fiver" type sites because I want to find someone to work with who truly gets it. So back to the question: Is it appropriate to post it here, and if so, in which community? Thanks, Nick Sophinos...

Need help in doing Overflow-x and a Dropdown

I cant access my dropdown when i put overflow-x: auto; because the current navbar have many things in them and they requested to put scrollbar in there which is the overflow-x: auto; but then the dropdown doesnt work as intended
No description

Need help understanding the websites layout semantics

When making websites is the content area such as the text, background image and all content thats in the middle of the website (not the nav section) when you first arrive, is all that stuff within the header semantic tag? or is that part of the <main <section> area. And if its part of the main section area do they just have the background image expanded to reach the <header> tag Ex: min-height: 180vh so it covers the section and header
No description

how to center a div, with a child element that has been moved with position relative?

I have a div with 2 child elements (h2, img) i have moved the image to left so the text overlap a bit, but now the div with these 2 elements looks off centered, how could i fix it? ```html <div class="flex flex-col sm:flex-row items-center "> <h2...
No description

Where to place media queries when nesting with SASS?

Having trouble on making my page responsive once it hits (min-width:50rem), My "@media" is at the bottom nested inside the body.
No description

Base Web baseui/TimePicker tool not working, implemented exactly as docs say?

Hello, SEE MY COMMENT ATTMT BELOW FOR MY IMPLEMENTATION I am trying to use this timepicker tool inside of my React component, from the 'baseui' library/npm package: https://baseweb.design/components/time-picker/...

Text and object together

Hi, how would you approach this design, where words are mixed with objects, different lines and colors etc.:
No description

Recommendations for semantic and primitive colors in CSS/Theming

Hey everyone, I'm looking for some recommendations on best practice. I'm building a web where I have a base color palette (primitives) which is applied to a semantic system (example primitive: neutral-100 = #fff, example semantic: bg-base = neutral-100). Right now I've made all of the primitive palette as custom properties in css but I'm thinking about what the best practise would be in regards to the semantic values as I just realised I might want them as custom properties as well. Does anyone...

Trying to make a simple grid layout

I would like to create a grid layout to simplify the creation of sections on my site for devs through a simple layout. Each section would contain a .container grid which adds 2 columns by default (and forces it to 1 on mobile). the idea is to define custom layout columns per section (iso wireframe ratio) without specifying the pixel size of the cells. As most sections contain 2 columns, I would like to be able to set the size of the first block only, and the second is auto fill (IF POSSIBLE ?)....
No description

How to target the div with the classname "from-sections"

I am trying to reduce the margin-bottom on that element. The code pen doesn't work, but it holds the code. As you will see. I have already tried .form-sections:last-child, and I also tried :last-of-type. No luck! https://codepen.io/bonesdupes/pen/bGZKOwj...

Resizing My image

How would I get my image to be the same height as the container (my image is also inside a div) as I start to shrink my screen. And can I get my image to not lose its width as I start to shrink my browser. It starts getting as thin as a pencil, is there a way to avoid that?
No description

Responsive web-design

I'm currently in the process of developing a language learning website. While I handle the back-end and design aspects, my main challenge lies in achieving responsiveness. The site looks terrible when viewed on resolutions other than the standard one. I'm seeking assistance to solve this issue.

Fixed Footer over content

Hello Guys! How are you doing? I have this fixed footer, i need it fixed at the bottom, but its hiding the content. ...
No description

Image optimization in plain React

Hello, is there any opportunity to have image optimization libraries for React JS like Next/Image?

responsiveness for with heights

hey, how do you guys deal short vh devices, i have a laptop with short vh and i always get the same problem with content overflowing to the bottom, with other screens (large) that i use everything is fine, any suggestions?

converting bootstrap template into next js

i am trying to convert bootstrap template into next js which is using owl.carousel.js library its only showing image in carousel for like 1 sec reference video => https://streamable.com/h0c9o2 github => https://github.com/AnonymousDEV001/nextJs-carasol in github code its just carousel so u don't waste your time finding the right page I had hydration issue i fixed that and now i don't have any errors and now its not showing carousel image at all not even for a sec...

Lighthouse & Multi-format Responsive <picture> tag

I'm a little perplexed and wondering if someone can see what i'm missing. Running a Lighthouse test on one of my sites and it's coming back that I should be using WEBP as my image format of choice. As far as I can tell, I am and have PNG as a fallback. Below is the code in question. <picture>...