Disco
KPCKevin Powell - Community
•Created by Disco on 5/22/2024 in #front-end
<a> wrapping an image extends below the image
Exactly - that's why i thought it was the <a> tag - because of the highlighted element in my snippets.
12 replies
KPCKevin Powell - Community
•Created by Disco on 5/22/2024 in #front-end
<a> wrapping an image extends below the image
Ah, dang it... it was just display block on the images. I think I was focused on adjusting the the <a> element.
12 replies
KPCKevin Powell - Community
•Created by Disco on 5/22/2024 in #front-end
<a> wrapping an image extends below the image
I just edited the codepen and put a thick border around the outside - this really highlights the extra space at the bottom of each image.
12 replies
KPCKevin Powell - Community
•Created by Disco on 5/22/2024 in #front-end
<a> wrapping an image extends below the image
The codepen still has the issue for me (latest version of Chrome on windows) so no fix yet!
12 replies
KPCKevin Powell - Community
•Created by Disco on 5/22/2024 in #front-end
<a> wrapping an image extends below the image
Thanks for the help, I found that thread too but none of those solutions seem to work. Setting the image to display block doesn't change anything - as the two screenshots of the dev tools show, it's the <a> element that extends below the image. The image then scales into this extra space, which is what I'm trying to avoid.
12 replies
KPCKevin Powell - Community
•Created by Disco on 5/22/2024 in #front-end
<a> wrapping an image extends below the image
I did think of that (I also dispensed with the inner div altogether and made the a tags the grid items). As you can see in the screenshot, the a tag now covers the full image but still extends those few pixels below it.
12 replies
KPCKevin Powell - Community
•Created by kimonyrfr on 8/11/2023 in #front-end
moving text offscreen wrapping back from other side
Just hop in a time machine, go back to 1999 and use
<marquee>
20 replies
KPCKevin Powell - Community
•Created by Zak on 8/8/2023 in #front-end
Uneven gaps in Grid
The top border is full page width though. Maybe display: inline-grid?
28 replies
KPCKevin Powell - Community
•Created by indee on 7/16/2023 in #front-end
i have a silly doubt
For the none of you that wanted negative margins https://codepen.io/adamantonio/pen/gOQeZMz
64 replies
KPCKevin Powell - Community
•Created by Disco on 7/13/2023 in #front-end
Thoughts on teaching logical properties to new students of web dev
@thevanilla13eck I was thinking along the lines of what you have said here, especially in covering both types. Students will naturally look for other examples in their CSS journey and if I've only taught "inline-size" and then they see "width" it's going to be confusing, and they'll probably be a bit pissed off. Interesting that in Kevin's video today he believes that they will soon become the norm.
9 replies
KPCKevin Powell - Community
•Created by georgeno1422 on 7/11/2023 in #ui-ux
I'll like some advice on how to approach Colors when working on a Black & White themed project #ui
The notion home page is predominantly black and white. You could use that for inspiration. https://www.notion.so/pricing
27 replies
KPCKevin Powell - Community
•Created by Ilan on 6/16/2023 in #front-end
Aligning 21 icons
That's the hard thing though... an irregular grid is easy enough but then it's difficult to make that responsive. Actually, challenge accepted: https://codepen.io/adamantonio/pen/qBQZQKx?editors=1100
17 replies
KPCKevin Powell - Community
•Created by Ilan on 6/16/2023 in #front-end
Aligning 21 icons
It's going to be pretty complicated to make it responsive if it must follow the 5/5/6/5 layout at larger widths. The responsive problem becomes really easy though if you make the grid regular - here it is at 7x3 at normal, 3x7 at medium and 1 column at small: https://codepen.io/adamantonio/pen/JjeXBby?editors=1100
17 replies