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

Having trouble adding a sidebar to my grid system

I'd really love help here if someone can dissect and figure out my dilemma. I have this WordPress site which is built using Advanced Custom Fields' flexible content fields. It's not using Gutenberg/the block builder. The user can add a section (<section>). They have some basic options, like class and background colour...

When do I use the grid-column/grid-row property over grid-template-areas?

Hello so I know both grid-column/grid-row and grid-template-areas are both effected by the grid-template-columns and grid-template-rows that you set. That makes me confused on when to use either. Defining placements by areas or line-numbers/names.

Is it possible to have a child element's height even across cards with CSS only?

I'd like to know if it's possible, with CSS only, to have the title (blue) box match the height of the biggest title box. The red box should then fill the rest of the space and the stat cards will evenly fill the red box. Second screenshot is the goal, but is using a fixed height on the title box. Code Pen: https://codepen.io/Maynards/pen/NWJYvzq...
No description

The Responsive Text CSS in Adobe Muse Affair

(I don't know why I have phrased like the title of a Tintin book). Hey There, I hope you are well?...

Icon font or directly

What is the way to go? Implement icons with an icon font or integrate the svg's directly? Which option would you choose?...

Localized Page Quirks

Hello everyone! I'm working on localizing 7 landing pages on my site. Did any of you ever do something different CSS/Design vise when localizing pages? Thanks!

How to build new Hero grid designs

I have seen these new Hero designs in Dribble and Pinterest. How would you develop something like this
No description

Text in a card shrinking to multiple lines at small screen sizes making the card look a mess

How can I make I text in a card not shrink but fit well in small screen sizes like 375px? Because it makes the text long and the card looks like a mess?? Someone please help me

How do I go about learning site design?

I am re-learning CSS (why I am here πŸ˜€ ), but how do others learn the how to of designing the general look'n'feel of a site?

Animation on Navigation Bar

Hi guys, I am trying to create an animation similar to the one Kevin Powell made (refer to the attached picture). However, the issue is that I am unable to replicate it exactly because it's in my navigation bar and not a simple rectangle. Additionally, I would like to implement a diagonal animation, as shown in the attached paint picture. Could you please assist me with this? ```HTML <!DOCTYPE html> <html lang="fr">...
No description

Navigation Bar

is there a reason why flex: 1; dosent work on a ul tag when making a navigation bar? As soon as you take out the ul tag and add a flex grow of 1 to the nav tag it then expands and acts how it should?
No description

Flex Grow not working on Nav

Can someone please tell me why my flex grow isnt working on my nav. I dont understand what im doing wrong
No description

Is there a correct way to copy these containers?

Sorry for that bad title, I created this basic container I wanted to know is there a correct way to copy the containers or would I have to make separate containers with the same styling?
No description

How can I recreate this design?

Hey there, Recently I was researching some cool portfolio design to make mine look better and I came across this guy who had done his Projects like this I was wondering how can I get the design he had? He had placed a laptop and phone with his project on it.
No description

White line between my hero and main sections

Hi all, trying to build a website for my sister's business. Just making a couple prototypes for the moment, and on this one I have a white line between the hero and main sections. It's a piece of body. ( I tried setting the body background color to red and the line becomes red). Anyone have an idea what causes this? heres my codePen: https://codepen.io/berdj/pen/OJqvyZw...

Best practice for Hero Image Behind/Below Text

As seen in the Figma image, I'm trying to make a hero page with a responsive image based on screen size. I currently have this set as a background image set to contain but end up having to create a lot of padding to bring the image up and down correctly. Is there potentially a better way to do this? At certain viewports, the image overlaps the text pretty badly.
No description

THE BEST SECRET EVER:

button{ all:unset; } now you can style your button however you want!...

security for simple login

Hey just curious . For a job interview I'm asked to do a login page and some of my friends are suggesting I give it some proper authentication . What's a very simple and easy hash library or library in general to give something that's just html and javascript a small amount of security if just for show To note I'm pretty new to front end and have no experience in anything cyber security...

Styling position

Hi guys, I'm trying to style the same position for the money after the text without set a fixed width. For example: Subtotal: $100 Total : $100.000 Is there any way to solve this problem?...

Having issues making this responsive

New to this I'm wondering how I would make this responsive so it all shrinks the same way no matter the size of the screen. https://codepen.io/Gabriel-Mald/pen/RwdQQja...