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

Some styles missing in firefox

Some of my element's styles are not being applied in firefox, as you can see, the highlighted element has classes .primary and .button-like, I am applying a display: flex, seen in the highlighted line of the stylesheet but it does not show in the style inspector It works on other browsers...
No description

Facing Issue on Layout on Extra Small Screen

I am trying to make Landing page of an organization(basically copying its design). Link to codepen is this: https://codepen.io/anurag1989/pen/jOdayJR The issue I am facing is when the screen size is getting less than 270px, the <body> (and hence its children <head> and <main>) element is shrinking more than the screen size (when using in responsive mode). This is leading to a blank space between the Screen and <body>. I have tried different ways like using display: grid for <main> but in that case, the .container is flowing out of <main> at size less than 290px. What is causing this issue as I am not able to figure it out. Please also comment on code quality and any tip to iprove it....
No description

Make SVG path proportionate

Hi guys, it's my first time posting or asking for help here, so I am sorry if I miss anything. I am trying to edit this SVG path to make the "bottom" part (in red) proportionate to the "top" part (in green) using this website: https://yqnn.github.io/svg-path-editor/ but I just can't seem to make it perfect ```html...
No description

Disabling page scroll during page load and using Lenis smooth scroll

I want to disable scrolling during page load and also have Lenis smooth scroll on my website. I have the code below to prevent scrolling during page load. The problem is that if I scroll during the page load, after the page load ends, the page jumps to the extent of the scroll. Does anyone know how can I solve this problem? ```<style> /* LENIS CODE */ html { scroll-behavior: initial; }...

CSS grid and image

So im having issues with image behaviour in css grid. HTML and CSS code will be provided down but to explain: I have 2 columns in grid where one (containing img) is 35% width while other (content) is 1fr or 65% meaning rest of the grid width. Now when i resize dimensions to make it smaller using inseptor tool (responsive) it works as it should. The image witdh is 35% and its height is equal to height of content div. But when i expand the dimensions the image continues to expand and because of that makes the content div height bigger and bigger making white space in it. What I want is that height of image stops expanding and is equal to height of container div. Without setting fixed height since content div should be able to get or lose more elements so its height will be changed depending on the content that is rendered....

I need help creating this division effect using CSS.

Hey all! hope you're well! I am creating a project at the moment, and in my hero section, I want a series of images in a slideshow on the left, and on the right a solid color with some text and a button in it. Currently I am just trying to work out how I would set up the container for this. ...
No description

CSS FLEX — Change item order, but only if wrap occurs

I would like to reorder flex items but only if it's wrapped. The only way I see now is to go to Inspect and note the viewport width at which wrapping occurs, and then add media query with order property added to the item in subject. Is there a "natural" way of achieving this, through a property and not query? I might change the paddings, margins, etc. down the road, so I would need to search and edit the breakpoint each time in the query. Thanks!...

Accessibility - nav toggle

I took Kevin's responsive layouts course few weeks ago and in one of the challenges I remember him changing a code for hidden menu (hidden because of hamburger button on the phone) from display:none; to visibility:hidden; height:0; position:absolute; explaining that it's better for accessibility. Today I watched this video https://www.youtube.com/watch?v=YAqRQoN8ykI focused on accessibility in navigations in which display: none was used again. I don't know if the video is older (1.12.2022) or the course is (unknown) and now I'm not sure which approach is actually better or if there is even difference....

How to name my custom properties semantically

Hello everyone, I would like some help and suggestions for articles that I can read about how I can name my custom properties in a better way. Instead of just naming the colors like: --red, --blue, --cyan, etc. I want to learn a better way of how I can name them, I heard that I should name the colors as primary, secondary (accent), neutral....
No description

Help w/ Dialog

Hi! Can anyone help me w/ my Dialog issue? Whenever the dialog is closed via the "Submit changes" button, it should change the correct line I was giving it some thought and all that I could think of is putting an identifier in the creation and hide it so I can call upon the position in the table, for example like this <p class="hidden">${locationInTable0based}</p> I do hope there is a better way tho, any ideas?...
No description

Scrollable Tables and Position Sticky oh my

Hey all, thanks in advance for any possible assistance. I am stumped by this one as I have googled it many times but haven't been able to find a good solution. Here is a code pen with the basics of the skeleton I'm trying to work on: https://codepen.io/LexCodepen/pen/LYqOYzR ...

Stuck on getting items to grid wrap.

Trying t o get my input and button be 100% container width at certain widths, then be side by side with the input being the majority of the width. I been tring different template columns with minmax and autofits but cant get them do both. I gave the input a max width, and was thinking once that max width was met the button move from the second line to the same line....
No description

Dynamic Font Size Based On Container & Text Length

I have a difficult challenge that I'm not sure is currently solvable. I want to utilize container size units (cqi) to adjust the font-size of text to the container... BUT...
No description

Struggling with my investigation methods a bit.

Would someone indicate where in this documentation it explains that the Boolean "method" will return only the truthy values please? So if I use it in the following code it returns the number of truthy values in array r. It does what it does but I need to understand why it doesn't return all truth/falsey values and only the truthy ones. Now I'm a bit more confused because I'm not sure if this question even makes sense...
r.filter(Boolean).length
r.filter(Boolean).length
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean (edited)...

Grid layout with CMS restrictions

Hey! I have an issue where I'm pretty sure it's not possible but want to ask just in case. I have a grid container with 3 columns, which is a template in a theme. Inside this container there are only 2 items, and I need to center the 2 items across the whole container (disregarding their columns). Now due to how the template is set up, it would be much easier if this was possible but I'm pretty sure it isn't. I'll have to go in and edit a ton of styling. Is this the only way?...

How can I Tackle down this layout for mobile and desktop size?

As you can see my issue is on how to make these 2 buttons appear at the bottom of the testimonials when going to mobile size, there won't be an issue if I just make this layout work as it is, but then the 2 buttons will have to stay at the top of the testimonials, as drawn with purple marker, any way to tackle this down?
No description

Include other HTML file in the HTML file

So, I have been searching for a way to include header.html to home.html... I used async and await but there is a delay in loading, so is there any other way? I am trying to use innerHTML with DOM. But still, I can see some flickering delay. Is there any other way...?...

Complex layout

How do you guys implement something like this?
No description

Bootstrap forms not appending data in the url via get method

If i submit basic form via get method , data is appended to the URL , but when i used Bootstrap form, the dont see any data being appended. How to fix this? ```js html -> http://127.0.0.1:5500/day7.html when form is submitted http://127.0.0.1:5500/values.html?fname=as&lname=as ...

grid child positioning and margins

Yo. I'm trying to figure out if there is a way to move the position of a grid-item inside the grid block. As you can see here, the text and image is spaced out quite a bit, so I wondered if there was a way to have the text sit on the far right of it's block (end?) and the image sit on the far left (start?) https://codepen.io/Laing91/pen/JjxrJOb...
No description