Grow your CSS skills. Land your dream job.

Why are these images not responsive?

  • # September 24, 2012 at 6:26 pm

    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

    # September 25, 2012 at 1:13 am

    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.

    # September 25, 2012 at 1:38 am

    Try giving the images a percentage width. I tried 13% and it seemed to work quite well.

    # September 25, 2012 at 11:50 am

    Thank you Steve, this worked, I changed

    max-width: 100%;

    to

    width: 10%;

    and all works as expected

    # September 25, 2012 at 1:32 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".