I had a “head-scratching” moment when working on the services page of this website. It was how to center an image on a page that is responsive?
This section is divided into two “divs” – divisions. One holds the image and one holds the text. For viewing screens with a 1350px width or greater I wanted the text to be beside the image of the crow, so I set the width of that div to be 70%. But as soon as the width of the screen was less, I wanted the text to drop below the image and spread out to 100%.
But the crow image wasn’t centered. So I added CSS to center the image:
#crow_image {
display:block;
width: 300px;
margin-left: auto;
margin-right: auto;
}
And that worked, sort of…the image was centered as the page was scaling down, but the image itself wasn’t scaling down and was eventually too big and was cut off.
So I had to think about it and realized that I really only wanted to suggest the largest width instead of a set width.
So I used max-width in the CSS and that did the trick!
#crow_image {
display: block;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}