Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Feb 2018
    Posts
    18
    Member #
    58467

    Creating responsive 3 x 3 gallery box

    Hello I am trying to create a flex grid which has 3 by 3 image gallery which is responsive,

    Currently this is going on a wordpress page and this is the code to my image using openseadragon.
    So I need this image:

    <div id="materials-0158" class="suarrmaterials-zoomable-image" style="height:460px; width:310px;" data-image="2020/05/DSC_0158-1.jpg"></div>

    to appear three times next to each other and three on the bottom, I will update the images and add more image boxes once i get the correct layout.

    Thank you.

  2.  

  3. #2
    Junior Member
    Join Date
    Sep 2020
    Posts
    15
    Member #
    61988
    Liked
    1 times
    You are trying to build two dimensional table with one dimensional grid system. Never gonna happen. Switch to two dimensional grid system (display:grid.

    <div class="gallery-wrapper">
    <div class="gallery-item">
    <img>
    </div><!-- one gallery image item -->
    </div>
    //add more gallery items

    .gallery-wrapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column-gap:1px;grid-row-gap:1px;align-items:center;}

    .gallery-wrapper .gallery-item img{width:100%;height:100%;object-fit:cover;object-position:center;}

    Sent from my K7 using Tapatalk


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:55 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com