There was some murmuring in the Blogging Platforms thread for a thread for asking “dumb questions” about design.
Quotation marks because we’re all dumb sometimes, and the whole point of asking other people is to learn.
SO… this was @zebra’s question but it’s relevant to my interests: how does one properly get CSS to adjust the width of an image based on screen size for mobile?
You can use something like
img {
width: 90%;
}
to adjust the side based on the width of the container. There are multiple ways to go about this, but hopefully this gets you started. 
the vw (View Width) and vh (View Height) units are great for screen based sizing in CSS.
They are used like this:
img {
width:100vw;
}
where percentages are changing the size based on a percentage of selected item’s parent, viewport units are a fractional ratio of the viewport (think: screen minus the UI elements).
So 1vw is 1/100th of the width of the viewport.
some nice reference:
Thank you so much for this thread, let’s keep it alive for a while.
Something to keep in mind is that images should be resized and compressed before putting up on a website.
Figure out the largest dimensions you need to support and scale down your image to that size or double that size and use higher compression to support retina screens.
Ideally you would have different sizes of your image and use the <picture> element to specify the image to use based on the screen size. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
read through that the other day, top stuff.
I find that a lot of my own stupid questions for coding layouts can be resolved by re-reading this permanent fixture in my bookmarks https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I highly recommend learning Sass for anyone who wants to make CSS less annoying.
Also using autoprefixer if you’re concerned about browser compatibility with modern CSS features…
edit: actually these are probably overkill if you’re just trying to build a simple personal website…so feel free to ignore everything I say
Right now reading all of this, I feel like I could make a perfect website in 2 minutes, but I know, I know that in a few weeks, when I’ll get started, I’ll be there, thinking I’d be unable to center this f**** “div” to save my life, shouting at this sticky footer that’s either not at the bottom or not matching the window’s heigth or not being clickable for some reason. And then, I’ll take a shower, some coffee, and will come back to this thread as calmly as I will possibly can.
[ https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ]
^ this right here is the kind of stuff that drives me batty and makes me just give up.
the author recommends using a javascript function to update a custom CSS variable to use the actual window size in place of vh units because the latter are broken across browsers / platforms. then adding a listener for resize events. then adding debounce/throttling logic to the resize handler.
what the hecking frack. no wonder we end up piled-up frameworks like Bootstrap.
anyways, thanks for the tips - resources shared above have allowed me to ditch Tailwind and roll my own stuff and have it work better anyway.
On the subject of CSS, I recommend reading
https://rachelandrew.co.uk/css/ and https://jensimmons.com
It’s important enough to mention again. For contemporary web design best practices without relying on hacks and JS frameworks, this site is blowing my mind (in a good way).
I highly recommend Rachel Andrew and her clear explanations of the latest CSS for layouts, responsive and otherwise: https://thecssworkshop.com/
if you want a Virgil to guide you through HTML/CSS/finally setting up your own site, she is it. her tutorials are not free but are not that expensive, and IMO it is money well spent. a few of the intro ones are free to get you started.
for DIY and as-you-go questions, I find https://www.w3schools.com/css/, and https://stackoverflow.com/questions/tagged/css invaluable.
and just generally, keep in mind that there’s always more than one way to approach a layout, so don’t feel you have to incorporate .js or whatever – you might want to, but there’s likely another way.
Totally agree, CSS is insane. It’s mostly because it’s just had stuff bolted on to it over the years instead of re-imagining it for the contemporary situation. Not to mention that the android / browser fragmentation issue is real.
I feel like its at this point where there are so many approaches to the same solution that its just confusing to know where to begin or where to point your compass. It’s not like regular programming where the same tools with different logic gets you to the same result. its more like different tools with different logic gets you to the same place, but all of the different tools are called ‘CSS’
calc() in css has been just the best thing that they’ve introduced. It should be able to compensate for the issues in that article to some degree.
In my classes (I teach this stuff at MCAD ) I’ve totally eliminated so much old css and am now just teaching the following as the beginner core skills:
With that tool set, you can build about 90% of most things you’d want to. And likely 100% of the indistinguishably designed web that we look at most of the times these days.
It’s been a struggle for decades but you and your students give me hope for the future.