Mystery spacing between 2 flex rows
Minimal reproducible code: https://codepen.io/ifigoinimightdie/pen/xxNeYxg
I have a simple flexbox with
flex-wrap: wrap. My 1st flex child has width: 100%, so the 2nd flex child goes to a new row. Yet there's a TON of extra spacing between them that has nothing to do with padding and margin. I never set a row-gap either.
Inspector indicates a purple region, which I think means the "shrink/grow" area. I tried setting flex: 1 etc. nothing has worked. Full codepen here: ...
Can't center title - horizontally + vertically
Current result - image 1
Desired result - image 2
Code, HTML:
...
Not getting informations from a form
I am using web3forms in order to get infro from a form to my gmial
but insted of getting the info, i get a blank email, so if anyone knows how
can i do this a different way, or what i did wrong would be ameazing thank you...
API returning error and also CORS error
I am trying to use this API, which I found on the website https://random-word-api.herokuapp.com/. The objective is to return a random word for my wordle game. The problem is that it is not returning the grid anymore, when I try to click in any of the options it returns some errors on the console, as shown in the image below. I spotted that the undefined error happens probably because there is no word to generate the grids. I found it weird that it is returning a CORS error, for being backend stu...
Positioning within a grid
Just wondering how people position elements within css-grid cols/rows? I know you can align or justify elements, but I'm talking about more fine-grained than that. Say you want to start an element 'x' amount down from its starting row.
For example the element in the above image spans 3 rows and is vertically centered, but I think it would look better positioned 10% down from its starting row
I could use
mt-[10%] on the element to have something a bit more reponsive to the page height, have a nested element with another grid covering all 3 rows, or something more silly, like using flex and a flex-basis of 90% and pushing the content to the end....
CSS list-style-type not being applied on <details><summary> on safari
Hey everyone,
I'm actually using tailwind but have tried it with css and the behavior is the same:
```html
<details class="group list-none before:hidden">
<summary class="cursor-pointer list-none text-xl">...
How can I make the handle which resizes content bigger. It's too small.
I set my parent up with this CSS but the handle that appears is so tiny that it's barely visible.
...
Need Help identifying different Semantic Sections
In the picture I provided is that entire piece supposed to be all in the header or the logo and button in the header and the content below it a section?
And to add to that is the header section mostly for navigation and titles or can there be just regular content in there?...
prefers-reduced-motion is a text color animation ok?
I'm making a text-based browser game and I just added a
Wating for player to join indicator when you join the room and it has a wave animation, but I'd also like to take into consideration users with prefers-reduced-motion setting on so I made an alternative for it, where text "shines" through.
I'm not sure if it's a good alternative or if it's still too much for users who prefer reduced motion, does anybody know anything about it? First gif is original, second is reduced motion version...