A lot of people comment, message, or reply to my questions saying that they struggle with making websites responsive.
I remember being stuck there, so here are my words of advice (a thread)
I remember being stuck there, so here are my words of advice (a thread)
First off, remember that if you didn’t write a line of CSS, you’d have a responsive website.
If you’re running into an issue, look into your CSS to see if you can find something that might be causing the issue.
If you’re running into an issue, look into your CSS to see if you can find something that might be causing the issue.
Avoid setting widths with absolute units like pixels, or even em and rem.
Stick with percentage if you need a width.
Heights cause a lot of problems too because of how CSS overflows work (and no, overflows are not a bug, but a feature of CSS).
Stick with percentage if you need a width.
Heights cause a lot of problems too because of how CSS overflows work (and no, overflows are not a bug, but a feature of CSS).
A lot of people like creating the desktop version of the site first, but if you just set fonts, colors, and backgrounds, and almost nothing else, you have most of the layout done (not including things like navigations obviously)
Don’t overthink it.
If you have a ton of media queries, you’re probably doing something wrong. The site should adapt as the screen grows or shrinks.
And also remember, other than other devs, most people don& #39;t shrink and grow their browser window to see what might happen
https://abs.twimg.com/emoji/v2/... draggable="false" alt="😊" title="Smiling face with smiling eyes" aria-label="Emoji: Smiling face with smiling eyes">
If you have a ton of media queries, you’re probably doing something wrong. The site should adapt as the screen grows or shrinks.
And also remember, other than other devs, most people don& #39;t shrink and grow their browser window to see what might happen
Talking about media queries, on’t create a breakpoint just because it’s a “common” screen size.
Media queries should be used because the layout starts to break, or look bad, not because you’ve reached “iPad” dimensions.
Media queries should be used because the layout starts to break, or look bad, not because you’ve reached “iPad” dimensions.
For the most part, keeping things simple gets you most of the way there. If it& #39;s really something that you do struggle with though, I have a free course starting soon called Conquering Responsive Layouts that will walk you through it all. https://courses.kevinpowell.co/conquering-responsive-layouts">https://courses.kevinpowell.co/conquerin...