Making responsive multiple divs

408
February 21, 2017, at 2:28 PM

I have page where I show 4 images - 2 by 2 on each row. I'm trying now to make them responsive when page is open on mobile device but I can't figured it out how to make this.

So I have this html

<div id="wrapper">
  <div id="main-content">
    <div id="img-row" >
      <a href=""><button  class="button"> Ask   </button>   </a>
    </div>
    <div id="img-row">
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
    </div>
    <div id="img-row">
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a>
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a>
    </div>
  </div>
</div>

And the css

#wrapper {
    margin: 0 auto;
    width: 960px;
}
#main-content {
    background: #fff;
    padding: 7px 7px 7px 7px;
    width: 946px;
    min-height: 400px;
    float: left;
}
.images {
  text-align: center;
  padding: 15px 15px;
  position: relative;
  vertical-align: middle;
  display: inline;
  width: 430px;
  margin: 10px 0;
}
#img-row {
  display: block;
  margin-top: -15px;
  position: relative;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
  text-align: center;
}
#img-row > a {
  position: relative;
}
#img-row:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
}
button.button {
  width: 570px;
  margin-left: 182px;
  height: 40px;
  font-size: 30px;
}
.wp-caption-text {
  display: block;
  position: absolute;
  width: 100%;
  color: white;
  left: 0;
  top: -30px;
  bottom: 1px;
  padding: 5px;
  font-weight: bolder;
  z-index: 2;
  font-size: 40px;
}

Now I've tried to add in css media screen query but there is no difference. In order to post images I have prepared JSFiddle demo.

Here is demo how it looks like: https://jsfiddle.net/vxu7rvv7/

I've tried few solution from other threads here but I can't get it work. In fact the media screen property is from another thread..

Can anyone help me a little here?

Answer 1

Best way will be using some responsive framework. Replace the css I hope it will make you images responsive for all devices.

<div id="wrapper">
  <div id="main-content">
    <div id="img-row" >
      <a href=""><button  class="button"> Ask   </button>   </a>
    </div>
    <div id="img-row">
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        </div>
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
        </div>
    </div>
    <div id="img-row">
       <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        </div>
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
        </div>
    </div>
  </div>
</div>

And use this css

#wrapper {
    margin: 0 auto;
    max-width: 960px;
}
#main-content {
    background: #fff;
    padding: 7px;
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
}
.img-item {
    padding: 15px 15px;
    width: 50%;
    margin: 10px 0;
    float: left;
    box-sizing: border-box;
    position: relative;
}
.images {
    width: 100%;
    position: relative;
    z-index: 50;
}
#img-row > a {
    position: relative;
}
#img-row {
    overflow: hidden;
}
#img-row:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.button {
    display: block;
    background-color: #bbb;
    margin: 10px;
}
button.button {
    width: 250px;
    margin: 25px auto;
    height: 40px;
    font-size: 30px;
}
.wp-caption-text {
    display: block;
    position: absolute;
    width: 100%;
    color: #ffffff;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 700;
    z-index: 200;
    font-size: 40px;
    transform: translateY(-50%)
}
@media screen and (max-width: 767px) {
    .img-item {
        padding: 7px;
        width: 100%;
    }
}

JSFiddle

Answer 2

first you need to change the width of #wrapper to auto, and change the images from inline to block, so basically your media screen css should look like this :

 @media screen and (max-width: 480px) {
   #wrapper {
      height: auto; overflow: hidden;
      width: auto;
   }
   .images {
     display: block;
     width:100%;
     padding: 0;
   }
   #main-content {     
       float: none;
       margin-right:0;
       width:auto;
    }
    button.button {
      width: 100%;
      margin: 15px 0;
    }
    .img-row > a {
      display: block;
    }
    .wp-caption-text {
        /* this will center the title in the vertically*/
        top: 50%;
        transform: translateY(-50%);
        /*------------------------------------------*/  
      padding: 0;
    }
}

PS

don't use the same id for multiple element but use class instead #img-row to .img-row and remove bottom:1x; from .wp-caption-text

Updated JSFIDDLE

Answer 3

try to use max-width:100%, and image row have two image, so maybe image need be max-width:(<50%) ?

#wrapper { 
    margin: 0 auto; 
    max-width: 960px; 
} 
#main-content { 
    background: #fff; 
    padding: 7px 7px 7px 7px; 
    max-width: 946px; 
    min-height: 400px; 
    float: left; 
} 
 
.images { 
  vertical-align: middle; 
  padding: 0px 15px 15px 15px; 
  max-width: 45%; 
  margin: 10px 0; 
} 
#img-row { 
  display: block; 
  margin-top: -15px; 
  position: relative; 
  height: auto; 
  max-width: auto; 
  overflow-y: hidden; 
  overflow-x: auto; 
  word-wrap: normal; 
  white-space: nowrap; 
  text-align: center; 
} 
#img-row > a { 
  position: relative; 
} 
#img-row:after { 
  content: ""; 
  position: absolute; 
  display: block; 
  left: 0; 
  top: 0; 
  max-width: 100%; 
  height: 100%; 
  z-index: 1; 
} 
.button { 
  display: block; 
  background-color: #bbb; 
  margin: 10px; 
} 
button.button { 
  max-width: 570px; 
  margin-left: 182px; 
  height: 40px; 
  font-size: 30px; 
} 
.wp-caption-text { 
  display: block; 
  position: absolute; 
  width: 100%; 
  color: white; 
  left: 0; 
  top: -30px; 
  bottom: 1px; 
  padding: 5px; 
  font-weight: bolder; 
  z-index: 2; 
  font-size: 40px; 
 
}
<div id="wrapper"> 
  <div id="main-content"> 
    <div id="img-row" > 
      <a href=""><button  class="button"> Ask	</button>	</a> 
    </div> 
    <div id="img-row"> 
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
    </div> 
    <div id="img-row"> 
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a> 
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a> 
    </div> 
  </div> 
</div>

Rent Charter Buses Company
READ ALSO
document.getElementbyID returns NULL for the DIV with in iFrame

document.getElementbyID returns NULL for the DIV with in iFrame

I have a JSP page which loads a static HTML page using iFrameNow i am trying to change the alignment of one of the DIV (which is there in static HTML page) using the jQuery dynamically

854
css vertical align text middle with overflow hidden

css vertical align text middle with overflow hidden

i'm rendering divs within a loopeach div has a text (could be long- which means overflow: hidden is needed

601
Animate height of div with changing content?

Animate height of div with changing content?

I've got a div with the ID testimonials that has a height of autoIn the div are a number of section's that vary in height

484