CODEWITHSUNDEEP
cssresponsive-design
user1122940
user1122940

Reputation:

Responsive divs with and image in each

I am trying to done is have a responsive div with 2 pictures centered, one in each div.

What I am want it is to drop down, when the screen is small and not big enought to display them side by side.

At the moment with the below when the screen is smaller it pushes the images into each other.

<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>

<div class="container">
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.co.uk"><img src="left_img.png" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.com"><img src="right_img.png" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
</div>

Upvotes: 0

Views: 45

Answers (3)

user1122940
user1122940

Reputation:

When I posted my reply, I didn't notice Fahad, Show code snippet link.

Thank you both for your help, this is the css code I went with in the end.

.container{width:100%;overflow:hidden;}
.inner_container{display:inline-block;width:49%;}
.img_container{width:250px;margin:0 auto;text-align:center;padding-bottom:5px;}

@media (max-width:501px){
.inner_container{display:block;width:100%;}
}

Once again thank you both for your help :)

Upvotes: 0

chrisbedoya
chrisbedoya

Reputation: 810

Set a min-width on the .inner_container

.container {
    width:100%;
    overflow: hidden;
}
.inner_container {
    float:left;
    width:50%;
    min-width: 250px;
}

.img_container {
    width:250px;
    margin:0 auto;
    padding-bottom:5px;
    text-align: center;
}

http://jsfiddle.net/63pnotjc/

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

You're using the wrong styles to do what you're trying to do. Mainly, you've set a fixed width of 250px to your img_container div which is why the images aren't getting scaled down. This the correct way to achieve what you want:

.container {
  width: 100%
}
.inner_container {
  width: 49%;
  display: inline-block;
}
.img_container {
  width: 100%;
}
.img_container a img {
  width: 100%;
}
<div class="container">
  <div class="inner_container">
    <div class="img_container">
      <a href="http://www.google.co.uk">
        <img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
      </a>
    </div>
  </div>
  <div class="inner_container">
    <div class="img_container">
      <a href="http://www.google.com">
        <img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
      </a>
    </div>
  </div>
</div>

With the above code, the images keep on getting scaled down and stay on the same line until the window size is reduced to very small. If you would want them to appear on two separate lines after a particular width, you will need to use media-queries like this:

.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }

@media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}
<div class="container">
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.co.uk"><img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.com"><img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions