Changing image and text sizes - per viewing port

Hello. I hope this is an easy explanation. I am creating a site, and I need to adjust the following items per the viewing device size:

Navbar logo
Images in Hero / Banners
Text copy sizes (maybe even the amount of copy with smaller (phone) screens

I’m sure there is more. I need the steps to initiate the re-sizing per the screen size change as expected to control the layout and content for limited viewing space.

Thank you! Reading and tinkering with it.

1 Like

Read the three sentences bout media query with the link you shared. It is a bit light on the particulars I’m looking for. Second resource seemed a bit over my head to be able to apply to my question. I have a Hero Banner with an image that needs to change sizes with different photos at the sizes offered. I created an XS MD and XL version of the image and struggled to find the best way to swap these out using a media query. I am not a CSS code expert. I keep breaking my design, which rrequires CTRL+Z to get back to what I had.

@kuligaposten

https://kuligaposten.com/post/media-query

404 Not Found

The page you are looking for does not exist.

Well that is ODD. There was a post, I read it yesterday.

@kspoor

you can read about srcset here

If you want a linter for your images bookmark this in your browser