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?
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
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
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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
i'm rendering divs within a loopeach div has a text (could be long- which means overflow: hidden is needed
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