I am trying to push a div with images underneath a couple of arrow icons, that do not take up a whole row, as seen below. However, the images underneath keep wrapping in between the arrows, which is not the desired result. I was wondering if someone can please advise how to fix this? The example I inserted only works in narrower viewports because I pulled it from my mobile site I am working on. I am confused why two separate divs are overlapping in this way. Thanks in advance.
#photo-viewer-outer-wrap div {
display: inline;
}
#photo-viewer-inner-wrap-left img {
max-width: 100%;
}
#photo-viewer-inner-wrap-right {
display: flex;
overflow-y: scroll;
max-height: 300px;
clear: both;
}
#photo-viewer-inner-wrap-right img {
max-width: 30%;
}
#left-arrow {
float: left;
width: 30px;
margin-left: 10px;
}
#right-arrow {
float: right;
width: 30px;
margin-right: 10px;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
</div>
</div>
I used flex for you. No need to float and display: inline:
#photo-viewer-inner-wrap-left {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#photo-viewer-inner-wrap-left img:first-child {
width: 100%;
}
#left-arrow {
width: 30px;
height: 30px;
margin: 20px 0 20px 10px;
}
#right-arrow {
width: 30px;
height: 30px;
margin: 20px 10px 20px 0;
}
#photo-viewer-inner-wrap-right {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
max-height: 300px;
}
#photo-viewer-inner-wrap-right img {
width: 33.33%;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
</div>
</div>
you are using display inline property in a div which force div to take as much as space it needs and allows another div to join it. check these for learning display properties link2
check this also
#photo-viewer-outer-wrap div {
display: block;
}
#photo-viewer-inner-wrap-left img {
max-width: 100%;
}
#photo-viewer-inner-wrap-right {
display: flex;
overflow-y: scroll;
max-height: 300px;
clear: both;
}
#photo-viewer-inner-wrap-right img {
max-width: 30%;
}
#left-arrow {
float: left;
width: 30px;
margin-left: 10px;
}
#right-arrow {
float: right;
width: 30px;
margin-right: 10px;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
</div>
</div>
Related
Does anyone of you know how to create this gallery box and text (with the line) from the image?
Can you help me, please?
I want to learn how to create this gallery box and add a magnifier icon when I hover over the image.
I also want to open the image when I click on it, in full size if possible.
May you please help me with this?
Thank you all for trying to help me, I did this, and it's working. Although I didn't add a magnifier icon on hover.
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<h3 style="color: #bb9754;"> Spoljašnost zgrade </h3>
<hr style="background-color: #bb9754;">
<div class="col-lg-2 col-md-4 col-6 my-3">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="..." />
</a>
</div>
</div>
</div>
</div>
Hope this helps:
.container {
width: "80vw";
margin: "0 auto";
}
.heading {
display: flex;
align-items: center;
}
.text {
flex-basis: 15%;
}
.divider {
content: "";
height: 4px;
background: #000;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
height: 100px;
max-width: 100px;
margin: 20px;
}
<div class="container">
<div class="heading">
<div class="text">
TEXT
</div>
<div class="divider"></div>
</div>
<div class="gallery">
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
</div>
</div>
#title{
font-size:20px;
color:#A5A195;
display:flex;
justify-content:center;
}
#item{
display:flex;
flex-flow:row wrap;
}
.img{
width:150px;
border-radius:15px;
margin-right: 50px;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div id="title">
SPOLJASNJOST ZGRADE
</div>
<hr>
<div id="item">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
</div>
</body>
</html>
I must be missing something obvious, but I'm trying to make a grid of four equally sized images and for some reason the two on the right aren't top aligning with the two on the left. They're about 10px lower. I really want to address this using inline CSS and I feel like I'm missing something.
<p>
<a href="https://www.google.com/page1" target="_blank" rel="noopener">
<img style="display: block; float: left; width: 49%; margin-top:5px;margin-right: 2%;margin-bottom:5px;" src="image1.jpg" alt="IMAGE 1" />
</a>
<a href="https://www.google.com/page2" target="_blank" rel="noopener">
<img style="display: block; text-align: right; width: 49%; margin-right: 2%;margin-top:5px;margin-bottom:5px;" src="image2.jpg" alt="IMAGE 2" />
</a>
</p>
<p>
<a href="https://www.google.com/page1" target="_blank" rel="noopener">
<img style="display: block; float: left; width: 49%; margin-top:5px;margin-right: 2%;margin-bottom:5px;" src="image1.jpg" alt="IMAGE 1" />
</a>
<a href="https://www.google.com/page2" target="_blank" rel="noopener">
<img style="display: block; text-align: right; width: 49%; margin-right: 2%;margin-top:5px;margin-bottom:5px;" src="image2.jpg" alt="IMAGE 2" />
</a>
</p>
Do I have an extra/missing tag somewhere? Is there an easier way to do this via inline CSS?
Is this what you want?
div{
display: grid;
grid-template-columns: repeat(4,150px);
grid-template-rows: 150px;
gap: 15px;
}
<div>
<a href="https://www.google.com/page1" target="_blank" rel="noopener">
<img src="https://via.placeholder.com/150" alt="IMAGE 1" />
</a>
<a href="https://www.google.com/page2" target="_blank" rel="noopener">
<img src="https://via.placeholder.com/150" alt="IMAGE 1" />
</a>
<a href="https://www.google.com/page1" target="_blank" rel="noopener">
<img src="https://via.placeholder.com/150" alt="IMAGE 1" />
</a>
<a href="https://www.google.com/page2" target="_blank" rel="noopener">
<img src="https://via.placeholder.com/150" alt="IMAGE 1" />
</a>
</div>
Use display: flex on the p tags, parent elements, css. No need for those floats. Display flex will force the child content of the parent flex container to line up in row when in default mode.
Basic concepts of Flex ~ MDN
p {
display: flex;
align-items: center;
justify-content: space-around;
}
<p>
<a href="https://www.google.com/page1" target="_blank" rel="noopener">
<img style="display: block; margin-top:5px;margin-right: 2%;margin-bottom:5px;" src="image1.jpg" alt="IMAGE 1" />
</a>
<a href="https://www.google.com/page2" target="_blank" rel="noopener">
<img style="display: block; text-align: right; margin-right: 2%;margin-top:5px;margin-bottom:5px;" src="image2.jpg" alt="IMAGE 2" />
</a>
</p>
<p>
<a href="https://www.google.com/page1" target="_blank" rel="noopener">
<img style="display: block; margin-top:5px;margin-right: 2%;margin-bottom:5px;" src="image1.jpg" alt="IMAGE 1" />
</a>
<a href="https://www.google.com/page2" target="_blank" rel="noopener">
<img style="display: block; text-align: right; margin-right: 2%;margin-top:5px;margin-bottom:5px;" src="image2.jpg" alt="IMAGE 2" />
</a>
</p>
<p class='row'>
/* CSS */
.row {
display: flex;
align-items: center;
}
my three feture-three columns section column maybe skew some degree but my design not 100% match, how it possible? anyone help me plz.
my example code is here
<div class="container feture-three-columns">
<div class="column">
<div class="img-wrap">
<img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
<img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
</div>
<div class="grilles">
content
</div>
</div>
<div class="column">
<div class="img-wrap">
<img class="img-desktop" src="images/feture-image2.png" alt="" width="534" height="421" />
<img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
</div>
<div class="grilles">
content
</div>
</div>
<div class="column">
<div class="img-wrap">
<img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
<img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
</div>
<div class="grilles">
content
</div>
</div>
</div>
what am I am wrong in CSS or HTML code please describe me
.feture-three-columns {
padding: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.feture-three-columns .column {
width: 33.333333%;
position: relative;
}
.feture-three-columns .img-wrap {
transform: rotate(-17deg);
}
.feture-three-columns .column img {
display: block;
width: 119%;
height: auto;
transform: rotate(17deg) translateX(-83px);
}
.feture-three-columns .column img.img-mobile { display: none; }
I think you're looking for translate: skew. In the example below, I've added this to your img-wrap class and removed the rotation. I've also removed the transforms from the images themselves.
.feture-three-columns {
padding: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.feture-three-columns .column {
width: 33.333333%;
position: relative;
}
.feture-three-columns .img-wrap {
transform: skew(-10deg) translateX(-12%);
}
.feture-three-columns .column img {
display: block;
width: 120%;
height: auto;
}
.feture-three-columns .column img.img-mobile { display: none; }
<div class="container feture-three-columns">
<div class="column">
<div class="img-wrap">
<img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
<img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
</div>
<div class="grilles">
content
</div>
</div>
<div class="column">
<div class="img-wrap">
<img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
<img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
</div>
<div class="grilles">
content
</div>
</div>
<div class="column">
<div class="img-wrap">
<img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
<img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
</div>
<div class="grilles">
content
</div>
</div>
</div>
I'm trying to make circular images on a page but I wanted them to be the same size and try to keep the aspect ratio. Since they are different sizes, it looks horrible. I wanted to make them look like the yellow guy image.
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: auto;
height: 200px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
border-radius: 50%;
}
.person:hover {
opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<p><strong>Counter-Strike</strong></p>
<br />
<a href="">
<img class="person" src="http://i.imgur.com/Zckhfao.jpg" />
</a>
</div>
<div class="col-sm-4">
<p><strong>Rainbow 6: Siege</strong></p>
<br />
<img class="img-circle person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>FIFA</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p><strong>League of Legends</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Racing</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Battlefield</strong></p>
<br />
<img class="person" src="http://i.imgur.com/bFg40Dj.jpg" />
</div>
</div>
</div>
you might need to apply height:auto and max-width: 100%; to you img
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: auto;
height: 200px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
border-radius: 50%;
}
.person:hover {
opacity: 1;
}
.myrow img{
height:auto;
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row myrow">
<div class="col-sm-4">
<p><strong>Counter-Strike</strong></p><br />
<a href=#Url.Action( "PC", "Gaming")>
<img class="person" src="https://baconmockup.com/300/200/" />
</a>
</div>
<div class="col-sm-4">
<p><strong>Rainbow 6: Siege</strong></p><br />
<img class="img-circle person" src="https://baconmockup.com/300/200/" />
</div>
<div class="col-sm-4">
<p><strong>FIFA</strong></p><br />
<img class="person" src="https://baconmockup.com/300/200/" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p><strong>League of Legends</strong></p><br />
<img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
</div>
<div class="col-sm-4">
<p><strong>Racing</strong></p><br />
<img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
</div>
<div class="col-sm-4">
<p><strong>Battlefield</strong></p><br />
<img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
</div>
</div>
</div>
If you want to keep your image in an img tag, you can use the object-fit property to force the image to adapt to its container. You might also need a polyfill for browser support, I suggest the lazysizes plugin.
You might also define your images with a background-image (directly set in a style attribute, so it can be managed from the view...) and use the more supported background-size property. Some lazyload plugins (see http://jquery.eisbehr.de/lazy/example_load-background-images for instance) offer this approach with a data-src attribute.
In both case the cover value seems, as you suggested, the right value to use with object-fit or background-size.
You can add max-width: 100% and max-height: 200px for your images to preserve aspect ratio but take not more than 200px or height. Demo:
.person {
border: 10px solid transparent;
margin-bottom: 25px;
max-width: 100%;
max-height: 200px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
border-radius: 50%;
}
.person:hover {
opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center list">
<div class="row">
<div class="col-sm-4">
<p><strong>Counter-Strike</strong></p>
<br />
<a href="">
<img class="person" src="http://i.imgur.com/Zckhfao.jpg" />
</a>
</div>
<div class="col-sm-4">
<p><strong>Rainbow 6: Siege</strong></p>
<br />
<img class="img-circle person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>FIFA</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p><strong>League of Legends</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Racing</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Battlefield</strong></p>
<br />
<img class="person" src="http://i.imgur.com/bFg40Dj.jpg" />
</div>
</div>
</div>
I am having some trouble making a responsive list of images. My objectives is:
On desktop resolutions 1000px and greater:
I need one line of images that never wraps and images always fit. I
can accomplish that with this:
HTML
<div id="partners" class="col-md-6">
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>
CSS
#partners {
background-color: #eee;
white-space: nowrap;
width: 100%;
display: table;
}
.logo-image {
vertical-align: middle;
display: table-cell;
border: solid 1px #F00;
}
.logo-image img {
max-width: 100%;
}
#media (min-width:1000px) {
#partners {
}
.logo-image {
}
}
On smaller screens:
the blocks drop down (responsive)
But as users access this page on mobile devices those blocks get smaller. So I tried to make the image retain normal size then drop down by removing the partners css when the screen width is anything less than 1000px but that doesnt seem to work.
#media (max-width:1000px) {
#partners {
}
.logo-image {
}
}
here is my fiddle
I've been trying all week so far and at wits end, at this point I'm not sure it can be done.
You can simply make the display: block; to remove the inline display.
Check the updated code here:
#partners {
background-color: #eee;
white-space: nowrap;
width: 100%;
display: table;
}
.logo-image {
vertical-align: middle;
display: table-cell;
border: solid 1px #F00;
}
.logo-image img {
max-width: 100%;
}
#media (max-width:1000px) {
#partners {
}
.logo-image {
float:left;
}
}
<div id="partners" class="col-md-6">
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>
here is a simplified version of your Fiddle, just using float:left/none
#partners {
background-color: #eee;
}
img {
float: left;
border: solid 1px red !important;
}
#media (max-width: 1000px) {
img {
float: none;
display:block;
margin:auto
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="partners" class="col-xs-12 col-md-12">
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>