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>
Related
Hello i am trying to replicate youtube. I am coding and aligning video list. I added video title. But the problem is video title is not showing properly. video title width alignment is not proper. the video title is showing on the top of other videos. video title exceed the width. i want the video title to fit with in the video. Kindly help me to fix this.
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexbox{
display: flex;
align-items: center;
}
nav{
padding: 10px 2%;
justify-content: space-between;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #fff;
position: static;
top: 0;
z-index: 10;
}
.navright img{
width: 25px;
margin-right: 25px;
}
.navright .profile{
width: 30px;
border-radius: 30px;
}
.navleft .menuicon{
width: 25px;
}
.navleft .logo{
width: 130px;
padding-left: 20px;
}
.navmiddle .voice{
width: 16px;
}
.navmiddle .search{
width: 16px;
}
.navmiddle .searcharea{
border: 1px solid #ccc;
margin-right: 15px;
padding: 8px 12px;
border-radius: 25px;
}
.navmiddle .searchbox{
width: 400px;
}
.sidebar{
background: #fff;
width: 15%;
height: 100vh;
position: fixed;
padding-left: 2%;
padding-top: 20px;
z-index: -10;
}
.shortcuts a img{
width: 20px;
margin-right: 20px;
}
.shortcuts a{
display: flex;
align-items: center;
flex-wrap: wrap;
text-decoration: none;
width: fit-content;
}
.shortcuts a:first-child{
color: red;
}
.sidebar hr{
border: 0;
width: 85%;
height: 1px;
background: #ccc;
}
.small-sidebar{
width: 5%;
height: 200px;
}
.container{
padding-left: 17%;
padding-right: 2%;
padding-top: 20px;
padding-bottom: 20px;
}
.container .banner{
width: 100%;
}
.small-sidebar p{
display: none;
}
.flexbox .channelpic{
border-radius: 40px;
width: 50px;
}
.listcontainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-column-gap: 16px;
grid-row-gap: 30px;
margin-top: 15px;
}
.vidlist .thumbnail{
width: 100%;
border-radius: 5px;
}
.vidlist .flexbox{
align-items: flex-start;
margin-top: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="flexbox">
<div class="navleft flexbox">
<img src="/images/menu.png" alt="" class="menuicon" >
<img src="/images/logo.png" alt="" class="logo" >
</div>
<div class="navmiddle flexbox">
<div class="searcharea">
<input type="text" placeholder="Search" class="searchbox">
<img src="/images/search.png" alt="" class="search" >
</div>
<img src="/images/voice-search.png" alt="" class="voice" >
</div>
<div class="navright">
<img src="/images/upload.png" alt="" >
<img src="/images/notification.png" alt="" >
<img src="/images/simon.png" alt="" class="profile">
</div>
</nav>
<!---sidebar-->
<div class="sidebar">
<div class="shortcuts">
<img src="images/home.png" alt="" srcset=""><p>Home</p>
<img src="images/explore.png" alt="" srcset=""><p>Explore</p>
<img src="images/subscriprion.png" alt="" srcset=""><p>Subscription</p>
<img src="images/library.png" alt="" srcset=""><p>Library</p>
<img src="images/history.png" alt="" srcset=""><p>History</p>
<img src="images/playlist.png" alt="" srcset=""><p>Playlist</p>
<img src="images/messages.png" alt="" srcset=""><p>Messages</p>
<hr>
</div>
<div class="subscriptionlist">
<h1>Subscription</h1>
<img src="/images/tom.png" alt="" srcset=""><p>Tom Hardy</p>
<img src="/images/Jack.png" alt="" srcset=""><p>Jack Nichol</p>
<img src="/images/gerard.png" alt="" srcset=""><p>Gerard Pique</p>
<img src="/images/megan.png" alt="" srcset=""><p>Megan Steve </p>
</div>
</div>
<div class="container">
<div class="banner">
<img src="/images/banner.png" alt="" >
</div>
<div class="listcontainer">
<div class="vidlist">
<img src="/images/thumbnail1.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail2.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail3.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail4.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail5.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail6.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail7.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail8.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Just add word-break:break-all to .vidinfo > a.
.vidinfo > a {
word-break: break-all;
}
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 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>
I want to set all the images in center and five image in first row and rest of the images in second row in center. I tried the following code.
<section id="Section">
<h1 class="sectionTitle text-center">Images</h1>
<div class="row center" id="Logo">
<!-- All logo from firestore -->
</div>
</section>
I am using firestore here is my JavaScript code:
db.collection('images').orderBy('image').onSnapshot((snapshot) => {
//insertHtml("#main-content", response);
snapshot.docs.forEach(doc => {
var brand = '<div class="column">'
+ '<img src="images/'+ doc.data().image + '"></div>';
$("#Logo").append(brand);
});
});
here is my css code:
#Section .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#Section .row .column {
float: left;
width: 20%;
}
#Section .row .column img{
max-height: 115px;
max-width: 210px;
}
There are 8/9 images, so first row works well, but 2nd row is not in center. I want to fix it. How can I do it ?
Use display flex and change the flex-basis to 100/number of elements like so :
#Section .center {
display: flex;
margin-left: auto;
margin-right: auto;
justify-content : center;
align-items : center;
flex-wrap : wrap;
column-gap : 15px;
row-gap : 15px;
width: 80%;
}
.logos {
text-align : center;
flex-basis : calc(20% - 15px);
background-color : red;
]
<section id="Section">
<h1 class="sectionTitle text-center">Images</h1>
<div class="row center" id="Logo">
<div class="logos"> 1 </div>
<div class="logos"> 2 </div>
<div class="logos"> 3 </div>
<div class="logos"> 4 </div>
<div class="logos"> 5 </div>
<div class="logos"> 6 </div>
<div class="logos"> 7 </div>
<div class="logos"> 8 </div>
<div class="logos"> 9 </div>
</div>
</section>
You can use
For the alignment of all elements horizontally
<div class="row justify-content-center" id="Logo">
<div class="col-md-*"> 1 logo </div>
<div class="col-md-*"> 2 logo </div>
<div class="col-md-*"> 3 logo </div>
<div class="col-md-*"> 4 logo </div>
<div class="col-md-*"> 5 logo </div>
</div>
<div class="row justify-content-center" id="Logo">
<div class="col-md-4"> 1 logo </div>
<div class="col-md-4"> 2 logo </div>
<div class="col-md-4"> 3 logo </div>
</div>
Is this what you need?
[example
.container {
display: flex;
flex: 1;
flex-wrap: wrap;
}
.item {
width: 200px;
height: 50px;
background: pink;
margin: 20px;
display: flex;
justify-content: center;
}
img {
width: 40px;
background: teal;
}
<div class="container">
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</div>
<div class="item">
<img src="" alt="1" />
</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>