Responsiveness tips!
Hey i’m 15 days into CSS, i do struggle with responsiveness alot as i always start with desktop design and try to fit it into mobile, also i don’t use media queries, i just stick with basic responsiveness code.
So any tips to maybe avoid some errors or some best practices would be appreciated!
3 Replies
very basic tip: use media queries
other than that, stick to CRL, it's got a lot of good tips for basic responsiveness
maybe this is also an interesting video for you to watch
https://www.youtube.com/watch?v=JFbxl_VmIx0
Kevin Powell
YouTube
Responsive layout practice for beginners
The project I’m working on in this video 👉https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK
🔗 Links
✅ Frontend Mentor Project from this video: https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK
✅ VS Code Live Server extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.Live...
I understand, I try to avoid media queries too to try to train myself to just code responsively from the start. Of course they can’t be avoided in every case, like I have to use for mobile nav so I put all those styles in a MQ. Also watch KPows vid about mobile first thinking, which was validating because my rhythm was to fold in the complexity. It’s so lovely with flex-wrap and grid autofit; most simple layouts just flow no matter the size. I would suggest getting very familiar with both flexbox and grid , they’re great tools for responsiveness. And now there are container queries which are fabulous for components to have more than 2 layout forms (e.g. row vs column)
https://youtu.be/p3k_IrXLNRc?si=KjY56kd9HV8E5kHI
Kevin Powell
YouTube
The problem with mobile-first CSS
👉 I’ve started a second channel @GeneralMusings for my podcast! You can check out the channel if you prefer YouTube, or https://kevinpowell.co/podcast if you prefer it in podcast form.
Mobile-first is generally accepted as a best practice when it comes to writing CSS, but sometimes it isn’t the best approach. It’s nice to have a black-and-whit...