<template>
<div>
<h2>Kanal Listesi</h2>
<div class="container">
<div v-for="(channel,index) in channels" :key="index">
<div v-if="channel.ChName">
<img
:src="'http://uyanik.tv/conf/images/'+channel.Image"
:class="{selectedIndex:currentIndex === index}"
:ref="index"
/>
</div>
</div>
</div>
</div>
</template>
.container {
display: flex;
flex-flow: row wrap;
/*min-width:1200px;
overflow-x:auto; */
justify-content: center;
}
.container::after {
content: "";
flex: 0 1 32.7%;
}
div > div > div > div > img{
margin: 10px 10px 10px 10px;
height: 100px;
}
div{
text-align: center;
}
My VueJs app has a container which utilizes from flexbox to shift unfitting boxes to the next rows. The issue is that the app will be used in TVs which uses earlier versions of browsers . Thus, I am not able to use flex-flow property as old versions partially supports flexbox. Right now, items overflows to the outer screen. I must display the items like in the output below:
But I get this output in the device :
You can use float or inline-block to get this desired layout, see below example:
div {
width:100%;
padding:0 15px;
}
div img {
float:left;
margin:10px;
}
<div>
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
JSFiddle
Related
I have a problem, where I wish to toggle two divs (each in a column of their own), when a mouse covers over an element on page.
At this point only div (.text_2) reacts when .item-2 is hovered, but I also need text.2.2 to react, and appear (this div is placed in the next column).
I have tried a couple of different things in order to make this work. for example this
$('.item-2').hover(function() {
$('.text_2').toggleClass('hide_default');
}, function(){
$('.button-rounded').toggleClass('hide_default') {
$('.text_2.2').toggleClass('hide_default');
});
});
Here's my code so far
$(".item-1").hover(function(){
$('#text_1').toggleClass('hide_default');
}, function(){
$('#text_1').toggleClass('hide_default');
});
$(".item-2").hover(function(){
$('.text_2').toggleClass('hide_default');
}, function(){
$('.text_2').toggleClass('hide_default');
});
/* Body */
* {
margin: auto;
padding: o;
}
html, body {
margin:0;
padding:0;
}
/* Header */
#main{
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
/* Contacts */
#contact{
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About{
margin: 50px;
}
/* Slider */
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white; color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
overflow: hidden;
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
/* New slider */
#container_1{
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Sofia Bordoni</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="contact">
<div class="item item-1">
Sofia Bordoni
sofiabordoni#gmail.com
0045 9164 6938
About
</div>
</div>
<div id="container_1">
<div class="item" data-target="#text_2">
<img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px">
</div>
<div class="item" data-target="#text_3">
<img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px">
</div>
<div class="item" data-target="#text_4">
<img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px">
</div>
<div class="item" data-target="#text_5">
<img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px">
</div>
<div class="item" data-target="#text_6">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px">
</div>
<div class="item" data-target="#text_7">
<img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px">
</div>
<div class="item" data-target="#text_8">
<img class="Image" src="Images/plakat.png" width="250px">
</div>
<div class="item" data-target="#text_9">
<img class="Image" src="Images/mani-sito_2.png" width="250px">
</div>
<div class="item" data-target="#text_10">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px">
</div>
<div class="item" data-target="#text_11">
<img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px">
</div>
<div class="item" data-target="#text_12" >
<img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px">
</div>
<div class="item" data-target="#text_13" >
<img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px">
</div>
<div class="item" data-target="#text_14" >
<img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px">
</div>
<div class="item" data-target="#text_15" >
<img class="Image" src="Images/Betafactory.gif" width="450px">
</div>
<div class="item" data-target="#text_16" >
<img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px">
</div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br>
Candle
</p>
</div>
<div class="nav-item column column-3">
</div>
<div class="nav-item column column-3">
</div>
</div>
<script src="Onhover.js"></script>
<script src="HoverColor.js"></script>
</body>
</html>
You've already got the structure in the HTML from the previous answer I provided to use the data-target to genericise the logic and keep it DRY.
As such you just need to amend the selector in the data-target to match both the #text_2 and #text_2.2 element. Note that the . in the latter selector will need to be escaped so that it's not interpreted as a class selector.
$(".item").hover(function() {
$(this.dataset.target.replace('.', '\\.')).toggleClass('hide_default');
});
* {
margin: auto;
padding: o;
}
html,
body {
margin: 0;
padding: 0;
}
#main {
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
#contact {
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About {
margin: 50px;
}
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white;
color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
/* overflow: hidden; */
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
#container_1 {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="contact">
<div class="item item-1" data-target="#text_1">
Sofia Bordoni sofiabordoni#gmail.com 0045 9164 6938
About
</div>
</div>
<div id="container_1">
<!-- note additional id selector in data-target here -->
<div class="item" data-target="#text_2, #text_2.2"><img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px"></div>
<div class="item" data-target="#text_3"><img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px"></div>
<div class="item" data-target="#text_4"><img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px"></div>
<div class="item" data-target="#text_5"><img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px"></div>
<div class="item" data-target="#text_6"><img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px"></div>
<div class="item" data-target="#text_7"><img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px"></div>
<div class="item" data-target="#text_8"><img class="Image" src="Images/plakat.png" width="250px"></div>
<div class="item" data-target="#text_9"><img class="Image" src="Images/mani-sito_2.png" width="250px"></div>
<div class="item" data-target="#text_10"><img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px"></div>
<div class="item" data-target="#text_11"><img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px"></div>
<div class="item" data-target="#text_12"><img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px"></div>
<div class="item" data-target="#text_13"><img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px"></div>
<div class="item" data-target="#text_14"><img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px"></div>
<div class="item" data-target="#text_15"><img class="Image" src="Images/Betafactory.gif" width="450px"></div>
<div class="item" data-target="#text_16"><img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px"></div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material
combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
<div class="nav-item column column-3"></div>
<div class="nav-item column column-3"></div>
</div>
A better approach would be to remove the . in the id attribute completely, as it avoids confusion with class selectors. Then the JS can be made even more simple:
<div class="nav-item column column-2">
<p class="hide_default" id="text_2_2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
$(".item").hover(function() {
$(this.dataset.target).toggleClass('hide_default');
});
I'm using a div to contain 3 sets of images. I have a back and a next button with which the user can navigate between the images.
My HTML:
<div class="imgs">
<button>Back</button>
<div class="conatiner">
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
</div>
<button>Next</button>
</div>
My CSS:
.imgs{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
display: none;
}
.container > .displayed{
display: grid;
grid-auto-columns: 1fr 1fr 1fr;
}
.container > .displayed > img{
width: 40px;
height: 40px;
border: 2px solid red;
}
The way how it works is that I have some JavaScript which ads the .displayed class to the displayed set of images. I want to achieve that when the class change happens one of the divs fades out and the other fades in so it will be more smooth. Is there a way to do this with CSS animations? Or how should I achieve this result?
You should try using animation with #keyframes since that, will make an animation every time a element goes from hidden to displayed, as you as want.
Try something around this:
const images = document.querySelector(".container > .img-holder-1 ");
document.querySelector("#back").addEventListener('click', function() { images.classList.toggle('displayed'); });
.imgs{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
display: none;
}
.container > .displayed{
display: grid;
grid-auto-columns: 1fr 1fr 1fr;
opacity:0;
animation:fade-in 1s forwards;
}
.container > .displayed > img{
width: 40px;
height: 40px;
border: 2px solid red;
}
#keyframes fade-in{
from{
opacity: 0;
}
to{
opacity:1;
}
}
<div class="imgs">
<button id="back">Toggle Class</button>
<div class="container">
<div class="img-holder-1 displayed">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
<div class="img-holder-1">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
<div class="img-holder-1">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
</div>
</div>
Click on "Toggle Class" to see the fade-in effect.
I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>
You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}
<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>
You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}
I have a division with n-number of divs which consist of images of different sizes:
<div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<!-- dynamically the images will be loaded -->
</div>
The functionality I am looking for is:
They have to flow in one row regardless of the number of images, which means they should re-size to smaller images if there is a large number of images.
The images aspect ratio has to be kept on re-sizing
The div should be all equal width and height on re-sizing
What I'd actually like is for each image to be aligned within a square that is consistently sized with all of the other images. Each image should be constrained and re-sized within their own square. Then I want all of the containing squares to be sized across the row. So as the number of images increases the size of the squares decrease accordingly.
I have tried and searched a lot for the solution, but nothing worked. Please demonstrate some real examples with the functionality I mentioned above.
I'd prefer using pure css and html, something like this:
<div class="ratio-16-9">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View">
</div>
<style>
.ratio-16-9,
.ratio-12-9,
.ratio-1-1 {
display: block;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
.ratio-16-9 img,
.ratio-12-9 img,
.ratio-1-1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ratio-1-1 {
padding-bottom: 100%;
}
.ratio-12-9 {
padding-bottom: 73.47%;
}
</style>
You can try something like this, although it requires an additional div:
* {
margin: 0;
padding: 0;
}
.outer-wrap-img {
display: table;
table-layout: fixed;
width: 100%;
}
.inner-wrap-img {
display: table-cell;
}
.inner-wrap-img div {
padding-bottom: 100%;
position: relative;
}
.inner-wrap-img div img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
}
.red {
background: #F00;
}
.green {
background: #0f0;
}
<div class="outer-wrap-img">
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
</div>
This should fulfill your requirement. set the total no. of image to variable imageCount and the code will calculate accordingly. Right now i have given background red. You can set image url when you use
var imageCount = 27;
var width = window.innerWidth;
var divWidth = width/imageCount;
var html = "";
for(var i=0;i<imageCount;i++)
{
html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>";
}
document.getElementById("images").innerHTML = html;
*{
padding: 0;
margin: 0;
}
<div id="images">
</div>
Use flexbox, or, you can use a table.
I am working on building a website and below is my desired outcome.
Desired: http://i.stack.imgur.com/JI7tQ.png
Note: there is an image on the left making it 5 images in total.
However when I resize the broswer the grid-images stack together like so..
Actual: http://i.stack.imgur.com/tNSLP.png
Below is my code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RM</title>
<meta charset="utf-8"
<meta name= "viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/custom.css" >
</head>
<body>
<div class="container">
<div class="port">
<div id="vertical-title" class="column-1">
<img src="http://www.placehold.it/60x650" >
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive">
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive" >
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
</html>
CSS CODE
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
div#vertical-title{
display: block;
float: left;
margin-left:0%;
}
img.img-responsive {
display: inline;
max-width: 75%;
height: auto;
}
.column-1 {
display: inline;
max-width:5%;
}
.row-1 .container{
display : inline;
max-width: 95%;
}
img.row-1{
display:inline;
max-width:100%;
}
#media (min-width: 500px) {
div.test h1{
color:blue;
}
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
img.inline-div {
width : 25%;
}
}
Desired Behavior
I would like for the four images to keep their position relative to each other and shrink as the window gets smaller. In other words, I want the 2x2 grid to reduce in size and not become a 4*1 grid.
Also I would like the left most image to have the height equal to the height of the screen.
Note The images are responsive when they are stacked together.
Questions
What is the best way to achieve this behavior ?
My gut is screaming JavaScript.
I cleaned up your code with more reusable and responsive one.
Here's the JsFiddle demo link.
HTML
<div class="container">
<h3>Welcome</h3>
<div class="port">
<div id="vertical-title" class="col-left">
<img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
</div>
<div class="col-right">
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
CSS
h3 {
color: blue;
margin: 5px;
}
.row {
width: 100%;
}
.img-responsive {
width: 100%;
}
.col-left {
max-width: 60px;
float: left;
}
.col-right {
max-width: calc(100% - 60px);
float: left;
}
.col-half {
width: 49%;
margin-left: 4px;
float: left;
}
#media (max-width: 500px) {
.col-half {
width: 100%;
}
}
Hope it helps.
Do you need images to be stacked in iPhone? You can add a media query
#media only screen
and (min-device-width : 568px) { img.img-responsive {
max-width: 49%;
}}
So in iPhone it will stack up and in other it will display the desired effect
Thanks to #iam-decoder for this answer.
All I had to do was change img.img-responsive to
img.img-responsive {
display: inline;
max-width: 40%;
height: auto;
}
Thanks to all the took time to respond to my question. I am curious however how this is done in JS.