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.
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.
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.
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):
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.
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?
Thing is you don't, or at least I wouldn't. I'd tell whatever is giving you that code to go **** itself.
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):
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.