Question

I’m wondering if there’s a good, generic, simple way, to code/ state all images to be centered horizontally within a responsive design below a certain viewport.

Eg, below 480px width viewport, all images display as block and are centered on the screen.

Answer 1

You’ll need to use a combination of CSS Media Queries and the actual CSS…

e.g. You can have 2 separate CSS files and call the relevant one based on device features

<link href="small.css" media="only screen and (max-width:480px)" />
<link href="big.css" media="only screen and (min-width:480px)" />

Then define the actual CSS inside small.css/big.css

e.g. in small.css, define the following style

img {margin:o auto;text-align:center}

and no need to define anything in big.css (default gets applied)