Flexible Image In Tribute Page

Hello everyone,
When looking at the template page that you are supposed to create a copy of in windowed mode, you can see that the image snaps to the edges of the margin as you make the window smaller, and maintains its original margin size when you make it larger. It is as if the margin adjusts itself dynamically. Does anyone know how this detail is done? The text below the image also follows the same pattern. Sorry if this is already posted I couldn’t find anything on it.

This is done by CSS3 media queries. Check that out on Google.
Basically screen (viewport) have certain points when some CSS rule applies.
For instance if you reach width = 900px you can apply rules that adjust content.
Same goes for any width or height or other conditions to be met.
Bootstrap inside his framework work with media queries.

Useful link : http://webdesignerwall.com/tutorials/css3-media-queries

Thank you very much this resource was just what I was looking for.

1 Like