Show images depending on the browser's width with CSS only

I had the make promo offers sections form our site. Usually this is an easy task but the requirement on this case was to preserve the full page width design and keep the page usable for 600px wide screens.

So let's start with the HTML portion.

image 1 image 2 image 3 image 4 image 5

The HTML will render as this: Screen Shot 1

Let's add a little css to get the desired effect:

  #top_offers{
    height: 190px;
    background-color: #d3d7cf;
    overflow: hidden; /* hide the excess images*/
    text-align: justify; /* or center here */
  }
  #top_offers a img{
    margin: 20px;
    border:none;
  }

Which brings the following results: Screen Shot 2

Screen Shot 3

You can play with the example here.

Comments

comments powered by Disqus