Kevin Powell
Kevin Powell
PostsComments
KPCKevin Powell - Community
Created by Patrik on 4/30/2025 in #help
grid same height for second block via aspect ratio
I guess the only problem is at smaller sizes, the 5fr 3fr goes out the window. This happens because fr works with available space... It's more like a max-size than anything else. If you want it to always be 5fr 3fr, you'd need to nest an element in the one on the left, and use position absolute like you mentioned: https://codepen.io/kevinpowell/pen/KwwyGxX?editors=1100
6 replies
KPCKevin Powell - Community
Created by Patrik on 4/30/2025 in #help
grid same height for second block via aspect ratio
Works for me? https://codepen.io/kevinpowell/pen/qEEVJxL
6 replies
KPCKevin Powell - Community
Created by Dev_HK on 4/25/2025 in #help
fixing the cls caused by scale on images
Are you sure the scale is the issue here?
22 replies
KPCKevin Powell - Community
Created by lllama on 4/14/2025 in #help
Creating View Transitions that are non-blocking
I remember Bramus mentioning it to me, but he might have been saying that eventually that will happen... I did find this https://github.com/w3c/csswg-drafts/issues/8687
5 replies
KPCKevin Powell - Community
Created by lllama on 4/14/2025 in #help
Creating View Transitions that are non-blocking
I don't think there's a way. Both single-page and multi-page work the same as far as taking snapshots goes, as far as I know. Though... I think there is a way to interupt them 🤔
5 replies
KPCKevin Powell - Community
Created by 𝔭𝔞𝔰𝔰𝔞𝔪𝔞𝔫𝔦 on 4/12/2025 in #help
Blog Preview Page
Few things: I don't particularly like this line 😄 
* {
    text-align: justify;
    color: #121212;
}
* {
    text-align: justify;
    color: #121212;
}
color is inherited, so you can put it on the body and everything will get that color unless you overwrite it specifically with another selector. text-align: justify generally is a typographic nightmare, and putting it on everything seems like overkill. If you do need it somewhere, apply it only where you need it (which is never, you never need it 😂) - (also, the frontend masters challenge doesn't use it) As for the responsiveness and the footer, I's start by removing the padding-top from the main. I'd probably use grid on the body instead of flex. 
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-content: center;
}
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-content: center;
}
And take the height off the footer thing (maybe add a small amount of margin to the top and bottom). I saw that you put a width and height on the article. In general, try to avoid declaring either one (specially height). The web needs to be flexible, so you might have a second card that's the same, but with a longer amount of text, and suddenly the layout is broken. Since this is a bit of a "one off" in that it's just a floating card on the page, I'd probably replace the width with max-width and simply remoev the height. The height will adjust. Also remove them for the footer. There, just give it a bit of padding. You'll have space between the words if you remove the display: flex, which you don't need, since equal padding on the top and bottom will center everything fine 🙂 (if you did need to keep the display: flex, the other solution is to wrap all the text there in a <p>, so that the text stays as regular inline content and doesn't become flex items).
4 replies
KPCKevin Powell - Community
Created by thedisplaynames on 4/12/2025 in #help
::before and ::after uses
I have a three part series just on them. It's old, but still good 😄 First video is what they are and how to use them, second one is specific to one feature of them, and the three one is some use cases 🙂 https://www.youtube.com/playlist?list=PL4-IK0AVhVjPBX_HelwDlNsTiyr2YGSBw
4 replies
KPCKevin Powell - Community
Created by thedisplaynames on 4/12/2025 in #help
::before and ::after uses
so many uses! 😄
4 replies
KPCKevin Powell - Community
Created by Thib on 4/9/2025 in #help
Using grid "zooms out" on mobile
oh, for some reason I had it in my head 1fr works, guess it's 100%, which makes sense 🙂
26 replies
KPCKevin Powell - Community
Created by Thib on 4/9/2025 in #help
Using grid "zooms out" on mobile
What puzzles me is that commenting display: grid; fixes it (with the caveat that my footer will not always be at the bottom of the screen if the body is too "short")
This works decently, but when I have rather large content on some pages, like code blocks, the whole page is "zoomed out" on mobile. A good example would be: https://ergaster.org/gear/kobo-clara-2e/
There's a weird thing with <pre> and grid that might be causing your issue (or more specifically, when you text that doesn't wrap). If the pre is the direct child of the grid, there's no issue, it's when it's inside an element that's a grid item, it seems to mess up the sizing of the auto column. It's not Safari specific either, I've had this happen in Chrome multiple times. if it's that, the solution is, where you have your full-height, add a grid-template-columns: 1fr Edit: the grid-auto-columns: 100% Chris mentioned would have the same effect
26 replies
KPCKevin Powell - Community
Created by vince on 4/9/2025 in #help
How would you BEM this?
It's very hard to give good BEM advice without more context. Not everything needs to be a element when it's nested... so like, if the title is the same as titles that are outside of that element, then just use whatever class you'd use there. Same for inner-container. If it's a common pattern, you can re-use it. Most common example for this is a .button. If you have a button in your application header, you probably don't want to bother with .application-header__button If you do want to be very strict, though, I'd go with - .application-header - .application-header__inner-container (or just __inner) - .application-header__title
9 replies
KPCKevin Powell - Community
Created by DoContra on 4/5/2025 in #help
How to make a input range
this is a good article breaking down how to do it https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/
7 replies
KPCKevin Powell - Community
Created by Chimi on 4/4/2025 in #help
What is your favorite off-white/off-black color to use in web design?
I can never predict what will pass AAA for contrast.
29 replies
KPCKevin Powell - Community
Created by Chimi on 4/4/2025 in #help
What is your favorite off-white/off-black color to use in web design?
That's what #222 is for, lol
29 replies
KPCKevin Powell - Community
Created by Chimi on 4/4/2025 in #help
What is your favorite off-white/off-black color to use in web design?
No description
29 replies
KPCKevin Powell - Community
Created by Chimi on 4/4/2025 in #help
What is your favorite off-white/off-black color to use in web design?
I'm pretty lazy, I usually just go #333 and #ddd - not that they're great, but it takes no brain power 😄
29 replies
KPCKevin Powell - Community
Created by Bill Reinhardt on 4/4/2025 in #help
Similar to "Text-Wrap: Balance" or "Text-Wrap: Pretty" but for Flexbox or Grid Layout Models
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
4 replies
KPCKevin Powell - Community
Created by Bill Reinhardt on 4/4/2025 in #help
Similar to "Text-Wrap: Balance" or "Text-Wrap: Pretty" but for Flexbox or Grid Layout Models
It's all part of the new item-* stuff, with what you're after being called item-pack: balance; - if you're curious, you can read all about it here.
4 replies
KPCKevin Powell - Community
Created by Bill Reinhardt on 4/4/2025 in #help
Similar to "Text-Wrap: Balance" or "Text-Wrap: Pretty" but for Flexbox or Grid Layout Models
There's no way of doing this currently. There are ongoing discussions right now that will make it possible though! Not that that helps you right now, lol.
4 replies
KPCKevin Powell - Community
Created by KayHayen on 4/3/2025 in #help
Can you add back the april fools content for CSS carousels, I was just totally unable to find it
The original title + thumbnail would have had a lot of people clicking, then stopping after 1min of watching the video, which YT very much doesn't like... and the new title + thumbnail would have left people very confused at the start. I'd purposefully recorded it so I could edit the start out after the 1st.
6 replies