you should use max-width: 100%; and have the image scale with a percentage based container. For the footer you might try dividing it up into quarters and having each module have width of 25% . I am just guessing at the number. But you might wanna try something like that. It will help your markup and images be more flexible for changes in the future.
I am making a small, easy one page site:
http://bipolarlifeinsurance.com/
I thought this would be a good site to learn a little responsive design.
I think it is working well, the photo image and my two banners, resize as my browser window gets smaller. Like I expect.
The four logos on the bottom - BBB, NAIFA, licensed, and 14 years do not. I don't understand why not.
Can anyone tell me why and how to fix?
mark
My assumption is that this is happening because they are not 'your' images (i.e. hosted by you) but rather are provided by another web server.
I would take copies and host them as you do the other images.
Try giving the images a percentage width. I tried 13% and it seemed to work quite well.
Thank you Steve, this worked, I changed
max-width: 100%;
to
width: 10%;
and all works as expected
you should use max-width: 100%; and have the image scale with a percentage based container. For the footer you might try dividing it up into quarters and having each module have width of 25% . I am just guessing at the number. But you might wanna try something like that. It will help your markup and images be more flexible for changes in the future.