What Figma says
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1266442805987774625/image.png)
Running into an issue while messing with the allow-discrete for animation feature
transition-behavior: allow-discrete;
to switch the alert message to display none when it's collapsed. The issue I'm running into is going back from display none to display block. I want to delay that animation a few milliseconds but it seems like the delay is ignored for display. Does anyone know if delay doesn't work with allow-discrete?
I've tried using @starting-style
to set it's display to none but that seems to be preventing it from going back to display block.
Here is an example of what I'm doing. It looks fine when it collapses but switching back to the default state causes the text to wrap before the animation ends because it is immediately switching back to display block instead of being delayed until the alert grows to full width....Making transition to new screen smoother
Is adding max-width to a text a good way for a line break design in css?
![challenge 3](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1266425962656956638/SPOILER_image.png)
What would be the best approach for my React Resume Builder?
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1266408499995349022/image.png)
WELP!
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1266302566011113574/Screenshot_44.png)
On focus border changing component size
restrain image height
100px
and auto
. I'd like the image to span the first row and the second, being the combined height of 100px
and the height of the text, but i suspect since the row is auto
it's using the images default height and being taller than i'd like, how would i get around this? Thanks in advance.
https://codepen.io/deerCabin/pen/WNqGmGq...Rendering Patterns
Help creating a Curved header
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1266043839299326074/image.png)
Your Opinion
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1266021782083600474/Screenshot_40.png)
Portfolio Website
em scope in @media and @container
@media (min-width: 50rem)
or @media (min-width: 50em)
is referring the browsers font-size, even if you've changed your html font-size
to something like 62.5% , its still using 1rem = 16px and 1em=16px?
```css
:root {font-size: 62.5%; /dont do this/}
.parent { font-size: 32px; /never use px for font-sizes!/}
@media (min-width: 50rem) { ...How to align 0..N items to start and 1 to end, with flex?
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1265907018640789565/Screenshot_2024-07-25_at_14.40.34.png)
How to avoid text to wrap when there's space, using flex or grid?
flex-flow: row wrap
I guess?)....![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1265900423231963157/Screenshot_2024-07-25_at_14.13.30.png)
Scale animation with CSS Grid causes pixel gap issues
gap: 1px
come in and out whereas the bottom one the gap is always visible
Outside of animating something else than scale (translate for example) I don't really see another solution?...![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1265795184403288247/image.png)
How to make a child element fixed but in the same time relative
Overlay on a div with a certain cutout in the middle.
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1265706195763597365/overlay-image.png)
How can i apply overlay for the design at bigger screen sizes ?
![No description](https://answer-overflow-discord-attachments.s3.us-east-1.amazonaws.com/1265609688528195665/Screenshot_2024-07-24_104720.png)