1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Creating responsive 3 x 3 gallery box

Discussion in 'HTML & Website Design' started by Soupi, Jun 1, 2020.

  1. #1
    Hello I am trying to create a flex grid which has 3 by 3 image gallery which is responsive,
    SEMrush
    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.
     
    Soupi, Jun 1, 2020 IP
    SEMrush
  2. JEET

    JEET Notable Member

    Messages:
    3,377
    Likes Received:
    376
    Best Answers:
    16
    Trophy Points:
    235
    #2
    I am not sure what you are asking, but if you want 3 DIV items to show side by side on a large screen, but fall below each other on a smaller screen, then use "float" in style.

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

    <div style=" clear: both;"></div>

    Rest of the content continues here.
     
    Last edited: Jun 3, 2020
    JEET, Jun 3, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,339
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #3
    1) Why does it need an ID?

    2) Why the pointless data- attribute? Some derpy "JS for nothing" or poorly written scripttardery?

    3) Don't inline style like that.

    4) This is some sort of f***wit turdpress garbage, isn't it?

    So first let's get the "proper" semantics in place. Remember, make proper semantic markup of content BEFORE you even THINK about dicking around with throwing layout OR scripting at it. If this is a gallery of thumbs, write it with ANCHORS to the full size images then if you need some sort of scripted assist, hook the anchor.

    (If said scripttardery is for the "lazy load" bullshit, don't do that. It's fragile with no graceful degradation!)

    
    <section class="gallery">
    	<h2>Describe this Gallery</h2>
    	<ul>
    		<li>
    			<a href="images/test_fullSize.png">
    				<img
    					src="images/test_thumb.png"
    					alt="describe this image, ALT is not optional!"
    				>
    			</a>
    			<p>
    				Some text about the image
    			</p>
    		</li>
    		<!-- repeat the above list-item here -->
    	</ul>
    <!-- .gallery --></section>
    Code (markup):
    
    /* assumes reset with box-sizing:border-box; is in effect */
    
    .gallery ul {
    	display:flex;
    	flex-wrap:wrap;
    	position:relative;
    	left:-1em;
    	/*
    		uncomment these if centering desired
    		max-width:63em;
    		margin:0 auto;
    	*/
    }
    
    .gallery li {
    	flex:1 1 auto;
    	padding:1em;
    	margin:0 0 1em 1em;
    	width:26%;
    	max-width:20em;
    }
    
    .gallery a {
    	text-decoration:none;
    }
    	
    .gallery li img {
    	display:block;
    	max-width:100%;
    	height:auto;
    	margin:0 auto 1em;
    }
    
    Code (markup):
    Guessing wildly, untested code, but is roughly how the problem should be approached.

    Seriously, get the correct markup before you start dicking with layout.
     
    deathshadow, Jun 3, 2020 IP
    JEET likes this.
  4. Soupi

    Soupi Greenhorn

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    I have added the images in, what size should it be to appear nicely with the text, bc the text shows up good but then the images appear like this
    https://ibb.co/zr53xgM
    
    <style>
    /* assumes reset with box-sizing:border-box; is in effect */
    .gallery ul {
        display:flex;
        flex-wrap:wrap;
        position:relative;
        left:-1em;
        /*
            uncomment these if centering desired
            max-width:63em;
            margin:0 auto;
        */
    }
    .gallery li {
        flex:1 1 auto;
        padding:1em;
        margin:0 0 1em 1em;
        width:26%;
        max-width:20em;
    }
    .gallery a {
        text-decoration:none;
    }
       
    .gallery li img {
        display:block;
        max-width:100%;
        height:auto;
        margin:0 auto 1em;
    }
    </style>
    <section class="gallery">
        <h2>Describe this Gallery</h2>
        <ul>
            <li>
    <div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
                <p>
                    Some text about the image
                </p>
            </li>
            <!-- repeat the above list-item here -->
            <li>
    <div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
                <p>
                    Some text about the image
                </p>
            </li>
            <li>
    <div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
                <p>
                    Some text about the image
                </p>
            </li>
        </ul>
    <!-- .gallery --></section>
    
    Code (markup):
     
    Soupi, Jun 4, 2020 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,339
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #5
    NO JOE-DAMNIT! Those should NOT be whatever dumbass ignorant BS is telling you to use DIV!

    Sorry if that's a bit over the top a response, but if you use S*** markup created by some S*** broken inaccessible scripting, of course the result is gonna be S***.

    Garbage in, garbage out.
     
    deathshadow, Jun 4, 2020 IP
  6. Soupi

    Soupi Greenhorn

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    The thing is I have this code which makes the image appear ...

    <div id="materials-01571" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0157-1-scaled.jpg"></div>

    How do I incorporate this into the html code?
     
    Soupi, Jun 4, 2020 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,339
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #7
    Thing is you don't, or at least I wouldn't. I'd tell whatever is giving you that code to go **** itself.
     
    deathshadow, Jun 4, 2020 IP
  8. Soupi

    Soupi Greenhorn

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #8
    right now if i minimize the page the images over lap.. please see example

    
    <Style>html,
    body {
      margin: 0;
      padding: 0;
    }
    .gallery {
      /* Negative margin = the padding of the wrapper. This ensures the boxes aligning against the left and right side of the container. Uncomment when this is not wanted. */
      /* 
      margin-left: -1rem;
      margin-right: -1rem;
      */
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: flex-start;
    }
    /* Wrapper is needed to create extra space between gallery boxes in case a background color is needed. */
    .gallery_image-wrapper {
      padding: 1rem;
      min-width: 8rem;
      /* Don't Grow, Do Shrink, Base size of 33.33% */
      flex: 0 1 33.33%;
    }
    .gallery_image {}
    .gallery_image-description {
      word-wrap: break-word;
      word-break: break-word;
    }
    .gallery_image-graphic {
      margin: 0 0 1rem 0;
      /* Add small spacing between image and description */
      padding: 0 0 56.25% 0;
      /* Ratio trick to make sure the images are the same size. */
      background-size: cover;
      /* Make sure the image is alway filling/covering the box */
      background-repeat: no-repeat;
    }
    .gallery_image-graphic-inline {
      max-width: 100%;
      margin: 0 0 1rem 0;
      display: block;
    }</style>
    <!DOCTYPE html>
    <html>
    <head>
      <title>Gallery Test</title>
    </head>
    <body>
      <div class="gallery">
        <div class="gallery_image-wrapper">
          <div class="gallery_image">
    <div id="materials-1713" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/dsc_1713-scaled.jpg"></div>
            <div class="gallery_image-description">Name : Landlok CS2 | Type : Erosion Control Blanket (ECB)</div>
          </div>
        </div>
        <div class="gallery_image-wrapper">
          <div class="gallery_image">
    <div id="materials-1716" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/dsc_1716-scaled.jpg"></div>
            <div class="gallery_image-description">Name : Landlok Supergro | Type : Erosion Control Blanket (ECB)</div>
          </div>
        </div>
        <div class="gallery_image-wrapper">
          <div class="gallery_image">
    <div id="materials-1719" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/dsc_1719-scaled.jpg"></div>
            <div class="gallery_image-description">Name : Landlok 300 |Type : Turf Reinforcement Mat (TRM)</div>
          </div>
        </div>
      </div>
    </body>
    </html>
    
    Code (markup):
     
    Soupi, Jun 8, 2020 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,339
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #9
    AGAIN don't use DIV for thumbnails, don't rely on whatever scripttardery is making this gallery, Do NOT piss all over the place with endless pointless garbage "Classes for nothing".

    ... and of course they overwrap, in that mess of non-sematic DIV soup who can tell what properties are going where, you have INLINED style for width and height that has no business in the markup,, broken negative margin trickery, "nowrap" set so where the blazes else are the images supposed to go when they don't fit, etc, etc, etc. Whatever bekaptah nonsense trash is telling you to write code this way? FORGET IT! You're basically bending yourself over the table ASKING for it.

    Seriously, ANYONE who tells you that HTML should be written like this:

    
      <div class="gallery">
        <div class="gallery_image-wrapper">
          <div class="gallery_image">
    <div id="materials-1713" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/dsc_1713-scaled.jpg"></div>
            <div class="gallery_image-description">Name : Landlok CS2 | Type : Erosion Control Blanket (ECB)</div>
    Code (markup):
    With four pointless DIV, five pointless classes, a pointless ID, some data- crap that's obviously scripttardery doing a blasted IMG tag's job, static style in the markup, etc, etc, etc... you have a monument to developer ignorance, incompetence, and ineptitude. Whoever or whatever is telling you to code this way? Need a good swift kick in the junk. That is a train wreck laundry list of how NOT to write HTML or CSS and is massively and ridiculously overthinking something simple.
     
    deathshadow, Jun 8, 2020 IP