3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Wide Images and Responsive Design

by LoclBiz
2 replies
  • WEB DESIGN
    • |
I'm working on making my website responsive, one step at a time.

I have a wide image across the top of the page, it's 988 pixels wide.

What should I do in order to make it responsive and mobile friendly? Is there a way to make it shrink to fit a smart phone? Or another option?
#design #images #responsive #wide
  • Profile picture of the author chaotic squid
    No idea what your using for your website, so I can't give you a definitive answer.

    However, if you're using WordPress just make sure the theme you get is mobile optimized. WP and the theme will do the rest to make your image responsive automatically.

    If you hand coding then make sure your using divs and columns to put your images in. Before I was using WP I did some work in Bootstrap, which is also a good platform for creating mobile responsive sites. It had a good column system that would help scale down content.
    {{ DiscussionBoard.errors[10023121].message }}
  • Profile picture of the author MadHu5tle
    Responsive images are easy.
    img {
    width: 100%;
    height: auto;
    }

    The one caveat is that this will make an image the full width of it's container, even if the image is smaller than the container. If you are using an image that is the full width of the container, it's not an issue. If not you need to wrap it in an element that will stop expanding once the image reaches full size, or add a max-width attribute.
    {{ DiscussionBoard.errors[10023703].message }}

Trending Topics