CODEWITHSUNDEEP
csscarouselgallery
Vall
Vall

Reputation: 33

How do I set the same size between thumbnails in my gallery?

Currently, the distance between the thumbnails is different. I want to set a distance of 5 pixels. I tried a few codes but it doesn't work. How do I set the same size between thumbnails in my gallery?

enter image description here

------------------------style.css-----------------------------

#about,
#screenshot,
#divider,
#pricing,
#newsletter {
  padding-top: 100px;
  padding-bottom: 100px;
}

/*---------------------------------------
    Screenshot section                           
-----------------------------------------*/

#screenshot .col-md-3 {
  display: block;
  width: 100%;
  padding-bottom: 1rem;  
}

#screenshot img { 
  background-color: #ffffff;
  box-shadow: 0px 1px 2px 0px #25605B;
  cursor: pointer;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  top: 0px;
  transition: all 0.4s ease-in-out;
}

#screenshot img:hover {   /*box shadow*/
  box-shadow: 0px 16px 10px 0px rgba(0, 0, 0, 0.3);
  top: -6px;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

/*Size between photos*/

.div1 {    
  width: 300px;
  height: 400px;
  border: 1px solid black;
}

.div2 {   
  width: 600px;
  height: 400px;
}

------------------------owl.carousel.css-----------------------------

/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
    



.owl-carousel .owl-item {                   
        float: left;
        margin: 5px;
}





.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

------------------------html-----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

  <head>

    <meta http-equiv="x-ua-compatible" content="IE=edge">  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">

    <title>....</title>

    <!-- Additional CSS Files -->
    


    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css"> <!-- font and icon -->

    <link rel="stylesheet" href="../assets/css/template.css"> <!-- menu -->
    
    <link rel="stylesheet" href="gallery/assets/css/main.css" />


   <!-- gallery -->
<link rel="stylesheet" href="../interior/css/bootstrap.min.css">
<link rel="stylesheet" href="../interior/css/animate.css">
<link rel="stylesheet" href="../interior/css/font-awesome.min.css">
<link rel="stylesheet" href="../interior/css/magnific-popup.css">

<link rel="stylesheet" href="../interior/css/owl.theme.css">
<link rel="stylesheet" href="../interior/css/owl.carousel.css">

<!-- Main css -->
<link rel="stylesheet" href="../interior/css/style.css">
    
    </head>
    
   <body>
    
    <!-- ***** Preloader Start ***** -->
    <div id="preloader">
        <div class="jumper">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>  
    <!-- ***** Preloader End ***** -->
    
    
    <!-- ***** Header Area Start ***** -->
    <header class="header-area header-sticky">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="main-nav">
                        <!-- ***** Logo Start ***** -->
                        <a href="index.html" >
                            <img src="gallery/logo.png">
                        </a>
                        <!-- ***** Logo End ***** -->
                        <!-- ***** Menu Start ***** -->
                        <ul class="nav">
                            <li class="scroll-to-section"><a href="../index.html" class="active"><b>Home</b></a></li>
                            <li class="scroll-to-section"><a href="../about/about.html">About</a></li>
                            <li class="scroll-to-section"><a href="#projects">Buy</a></li>

                            <li class="scroll-to-section"><a href="../contact/contact.html">Contact</a></li> 
                            <!-- instagram icon -->
                            <li class="scroll-to-section"><a href="https://...." target="_blank"><i class="fa fa-instagram" style="font-size:20px"></i></a></li>
                            
                        </ul> 
                        
                        <a class='menu-trigger'>
                            <span>Menu</span>
                        </a>
                        <!-- ***** Menu End ***** -->
                    </nav>
                </div>
            </div>
        </div>
        
        <!-- arrow icon -->
        <div class="arrow"><a href="../index.html"><i class="fa fa-angle-double-left" style="color:gray"></i></a></div>
        
    </header>
    <!-- ***** Header Area End ***** -->
    <!-- ***** Main Banner Area Start ***** -->
    
        <div class="Modern-Slider">    
          <!-- Item -->
           <div class="item">  
            <div class="img-fill">                
            
            </div>    
          </div>   
        </div>
     
    <!-- ***** Content Gallery ********************************************************************************** -->
    
        <!-- Wrapper -->
        
 

                <!-- Main -->
                    
           
                  <section id="screenshot">

               <!-- Screenshot Owl Carousel -->
               <div class="owl-carousel">
        
                        <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s" >
                                <a href="images/1.jpg" class="image-popup">
                                <img src="images/interiorsm.jpg" class="img-responsive div2" alt="screenshot"  > <!-- div2 horizontaal -->
                                </a>
                        </div>
<p></p>                
                        <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">  <!-- div1 verticaal -->
                                <a href="images/2.jpg" class="image-popup">
                                <img src="images/2.jpg" class="img-responsive div1" alt="screenshot">
                                </a>
                        </div>

                        <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
                                <a href="images/3.jpg" class="image-popup">
                                <img src="images/3.jpg" class="img-responsive div1" alt="screenshot">
                                </a>
                        </div>                                

                        <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
                                <a href="images/4.jpg" class="image-popup">
                                <img src="images/4.jpg" class="img-responsive div1" alt="screenshot">
                                </a>
                        </div>

                        <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
                                <a href="images/5.jpg" class="image-popup">
                                <img src="images/5.jpg" class="img-responsive div2" alt="screenshot">
                                </a>
                        </div>
<p></p>
                    <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
                         <a href="images/6.jpg" class="image-popup">
                              <img src="images/6.jpg" class="img-responsive div2" alt="screenshot">
                         </a>
                    </div>
<p></p>
                    <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
                         <a href="images/7.jpg" class="image-popup">
                              <img src="images/7.jpg" class="img-responsive div2" alt="screenshot">
                         </a>
                    </div>
<p></p>
                    <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
                         <a href="images/8.jpg" class="image-popup">
                              <img src="images/8.jpg" class="img-responsive div2" alt="screenshot">
                         </a>
                    </div>
<p></p>
                    <div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
                         <a href="images/9.jpg" class="image-popup">
                              <img src="images/9.jpg" class="img-responsive div1" alt="screenshot">
                         </a>
                    </div>
<p></p><p></p>
               </div>

</section>
         
                       



                <!-- Footer -->
                    <footer id="footer">
                                            <p><div class="a">&copy; Copyright of all photography on this site belongs to the respective photographer.
                                                            <br>No use may be made of any of the photographs without the express permission of the photographer.
                                                            <br>Design: <a href="#">.....</a>.</div></p>
                    </footer>

            
     
        
    <!-- ***** End Content Gallery ************************************************************ -->    
       <!-- jQuery -->
    <script src="assets/js/jquery-2.1.0.min.js"></script>    
    
    <!-- Plugins -->
    <script src="assets/js/owl-carousel.js"></script>
        <script src="assets/js/scrollreveal.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    
    
    
   <!-- gallery -->
    
<script src="../interior/js/jquery.js"></script>
<script src="../interior/js/bootstrap.min.js"></script>
<script src="../interior/js/jquery.magnific-popup.min.js"></script>
<script src="../interior/js/magnific-popup-options.js"></script>
<script src="../interior/js/owl.carousel.min.js"></script>
<script src="../interior/js/smoothscroll.js"></script>
<script src="../interior/js/wow.min.js"></script>
<script src="../interior/js/custom.js"></script> 


    <script src="assets/js/slick.js"></script> 
    <script src="assets/js/isotope.js"></script> 
    
    <!-- Global Init -->
    <script src="assets/js/custom.js"></script>

    
  </body>
</html>

https://jsfiddle.net/fga9cxr8/9/

Upvotes: 0

Views: 106

Answers (1)

Dhruvi Makvana
Dhruvi Makvana

Reputation: 905

Use flexbox and child:not(:last-child) selector to apply margin.

.parent{
  display: flex;
  flex-direction: row;
}

.child:not(:last-child){
  margin-right: 5px;
}
<div class="parent">
  <div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
  <div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
  <div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
  <div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
</div>

Upvotes: 1

Related Questions