CSS Is My Passion: top posts

Posts

1. Question

   my card looks fine on the page but gets squished in the sidebar?? do i need container queries

   hi all 🦉 1am here, kids are asleep, coffee #3. building a recipe site for practice and i have a recipe card, image on the left and text on the right. on small screens it stacks. i did it with a media query like teh tutorial said: .card { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .card { flex-direction: row; } } on the main page it looks great. but i also show the same card in…

   Jen HayesAug 31, 202611likes8comments

2. Question

   paano po gawing 3 columns sa laptop tapos 1 column sa phone? (CSS grid)

   sorry po if basic question 😭 kakatapos lang ng shift ko kaya medyo lutang pa. practice project ko po is portfolio page na may project cards. gusto ko 3 columns sa laptop, 2 sa tablet, 1 sa phone. ginawa ko po 3 media queries pero ang dami tapos may weird na gap sa tablet size: .projects { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .projects { grid-template-columns:…

   Ana Liza MercadoOct 14, 20265likes6comments

3. Update

   PSA: placeholder is not a label. it disappear when people…

   PSA: placeholder is not a label. it disappear when people start typing and then they dont remember what the field was for. use a real label element. this message is sponsored by the 6 usability tests where I watched this happen

   Mariana CostaOct 18, 20263likes2comments

4. Question

   auto-fill vs auto-fit in css grid, i still dont get it

   i have this card grid and i read like 4 articles and still cant tell what the difference is .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } auto-fill and auto-fit look EXACTLY the same on my screen. when does it actually change something? feels like im missing something obvious

   Kevin TranOct 4, 20262likes2comments

5. Question

   Tab key skips all my buttons in Safari but works in Chrome, is it a focus-visible problem?

   I have a doubt that is making me crazy. In our checkout, when I navigate with the keyboard in Chrome and Firefox everything works: Tab goes to inputs, buttons and links, and the focus ring appears. In Safari on Mac, Tab jumps only between the text inputs. The buttons and links are completely skipped, like they don't exist. I thought it was my CSS, we have this: button:focus { outline: none; } button:focus-visible {…

   Mariana CostaSep 1, 20262likes3comments