Alex Comments - Answer Overflow

Topics

Alex

KPCKevin Powell - Community

•Created by chikanlegbees on 3/28/2025 in #front-end

Issue with scrolling on mobile even after height is viewport height ! Likely address bar issue

svh will account for the smallest screen size. dvh will adjust as the screen resizes, which can cause a very minor flicker depending on how it loads. It's hard to articulate the difference and the pros and cons of each approach depends very much on the exact application, there's no hard and fast rule of which one to use over the other (which is why dynamic units exist). If you're seriously concerned about the impact of a slight layout adjustment like this, by far the best solution is to test both variants on an actual device. As for browser support, small/large/dynamic viewport units have 93% support and have been baseline for 3 years. If you're concerned that's not sufficient, you can always set min-block-size: 100vh; min-height: 100svh; and browsers which don't support the newer units will fall back to 100vh.

3 replies

KPCKevin Powell - Community

•Created by Myra on 3/26/2025 in #front-end

Digital clock

I knew there was something like .toLocaleTimeString() out there but couldn't find it immediately. Never even heard of requestAnimationFrame() before, that's blowing my brain a bit. Thanks!

15 replies

KPCKevin Powell - Community

•Created by Myra on 3/26/2025 in #front-end

Digital clock

@13eck.c All good points. I was basing my code off @Myra's initial example, but you're right, it should be .innerText. What would be your approach to timing it, given the challenge and assuming that it's important for the clock to be second-perfect?

15 replies

KPCKevin Powell - Community

•Created by Myra on 3/26/2025 in #front-end

Digital clock

Yeah instead of calculating the time once and then adding a second every second, do it all inside your displayTime function and run that via setInterval, like this: https://codepen.io/Beanie127/pen/KwKxzya. This also lets you update the clock more regularly, so it can be more accurate to the second, if that's something that matters for your application (although if you care about accuracy to the millisecond, this probably isn't the ideal way to track time lol)

15 replies

KPCKevin Powell - Community

•Created by Cancerous Ordo on 3/25/2025 in #ui-ux

The eternal grid UI problem: auto-adjusting to screen width while also honoring saved user settings

Are you talking about behaviour of elements in a container with display:grid, or the <table> element? Because in either case, you can absolutely set one column to a specific width while leaving the others to resize accordingly. For grid layout, set the default column width to 1fr and then you can set specific grid columns to a fixed value. For tabular data, you can set table-layout: fixed on the table element and set widths on the <th> elements. Check out https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables and/or https://css-tricks.com/snippets/css/complete-guide-grid/ — both discuss the specific use case you're describing

2 replies

KPCKevin Powell - Community

•Created by CodeMoon07 on 2/9/2025 in #front-end

CSS Grid Layout Overflowing and Resizing

Your elements are changing size because without defined dimensions, they will fill the space available to them. The columns are defined in terms of fr units, where 1fr is a proportional fraction of the available space after accounting for anything which takes up a fixed amount of space... such as the content of the other children. To preserve the aspect ratio and proportions of the whole grid, you need to use a less 'permissive' unit. Grid and fr units are designed to resize in this way to prevent content overflows.

11 replies

KPCKevin Powell - Community

•Created by Oli_T on 2/8/2025 in #front-end

Overlapping containers Dilemma..

For overlapping elements if usually go with a grid solution, since that always feels cleaner if it needs to be overridden at different sizes.

#container { 
display: grid;
grid-template-rows: 1fr 15vw 1fr;
&  img {grid-row: 1 / 3}:
&  form {grid-row: 2 / 4};
}

#container { 
display: grid;
grid-template-rows: 1fr 15vw 1fr;
&  img {grid-row: 1 / 3}:
&  form {grid-row: 2 / 4};
}

I'd also avoid using vw units for vertical spacing, since on an ultra wide monitor the form will be far higher up, which I doubt is a desirable result.

8 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

I probably wouldn't put an animated gradient on UI text in production — maybe on a big weighty line of hero text, but even then, less is usually more when it comes to animation

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

Setting aside the coding for a second, this was a fun exercise, but from a UX/accessibility standpoint it's basically illegible with bright colours and a white background. I increased the font weight, made it almost twice the size, set it against a dark background and put a fairly slow animation on it — it's still rather difficult to read

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

- Use @property to define a custom property, which can then be animated - Set that custom property as the starting angle of your gradient - then animate it with @keyframes More general notes: - Data attributes need to be named on the element, you can't just set content to attr(data) - Keep the text in the button so it's screen-reader accessible, but make it visually hidden so it doesn't conflict with the text on the pseudoelement - I turned the gradient into its own custom prop as well, so you don't have to update it in three different places - I set the gradient to a conic gradient and added more colours; if it's just two, you get a 'pulse' effect when the gradient crosses the wide part of the element which is quite unpleasant. You generally need a lot of colours to make it work, and if using a conic gradient, you also have to put the same colour at start and end to avoid a hard stop

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

Made some notes in the comments, but it works like this:

12 replies

KPCKevin Powell - Community

•Created by Assyrianlegend on 12/18/2024 in #front-end

Button Border animation

You were close with the -webkit-background-clip on the pseduoelement text, but it was empty because your data attribute wasn't set up correctly. Here's a slightly messy proof of concept I threw together https://codepen.io/Beanie127/pen/emOvyaZ

12 replies

KPCKevin Powell - Community

•Created by Artex on 12/18/2024 in #front-end

How do i strech the size of this element

Can't tell for certain without seeing an actual example with HTML (usually a codepen is recommended) but assuming the alert and the X button are in the navContainer, remove align-items:center or change it to stretch

6 replies

KPCKevin Powell - Community

•Created by empty on 9/14/2024 in #front-end

stroke text

I know this is months old now but this popped up on Chrome.dev's CSS Wrapped article and tickled the memory of this question. Turns out the solution is paint-order: stroke fill https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

9 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/29/2024 in #front-end

how did the font changed automatically ?

I don't know why it's changing like that in the figma file, but alternate characters are usually accessed by turning on stylistic sets. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates If you can find the font listing on the foundry website you may be able to look up the one you need, otherwise you can experiment with the numbers.

10 replies

KPCKevin Powell - Community

•Created by Kernix on 11/5/2024 in #front-end

Which of Kevin's courses would you recommend?

Well... Do you find CSS mystifying? Do you struggle to design responsive websites? Or are you trying to develop your skills into project architecture and build tools, that go... Beyond CSS? In other words, it depends what your goals are, and once you know that, the answer can probably be found in the descriptions (or indeed the names) of the courses

4 replies

KPCKevin Powell - Community

•Created by vic on 11/4/2024 in #front-end

how to make a text p tag fills it from parent container

One solution would be to hardcode font size of the element in vw/vi units, but doing so breaks accessibility recommendations about allowing users to adjust don't size. Another would be using an image with an alt tag, which is also not ideal.

14 replies

KPCKevin Powell - Community

•Created by vic on 11/4/2024 in #front-end

how to make a text p tag fills it from parent container

It is possible but only via a weird hack with relatively low browser support: https://kizu.dev/fit-to-width-text/

14 replies

KPCKevin Powell - Community

•Created by luca on 10/24/2024 in #front-end

Using a CMS on a vanilla JS website??

You build your website as normal in vanilla html/CSS/js, define your custom components and templates, and then let them at it with a very simple wysiwyg editor

20 replies

KPCKevin Powell - Community

•Created by luca on 10/24/2024 in #front-end

Using a CMS on a vanilla JS website??

You might want to check out https://www.surrealcms.com/ it's somewhat limited in what it can do and requires some upfront setup from you, but you basically designate certain elements as editable using custom attributes on the html and you can design page templates so they can add blogs or whatever

20 replies