-1

I'm working in WordPress with the Divi theme and I've made a grid of 2 rows and 4 columns. I'm trying to create a zigzag pattern in the grid where each div has either an image or text:

image text image text
text image text image

I've only just added the images and i noticed a bit of leftover space at the bottom of each image. This kind of messes up the pattern so I tried inspecting and noticed the divs which contain the images all extend a little bit further than the images.

I'm trying to get rid of the extra space at the bottom of each image by making the divs scale according to the size of the child (img).

Note: although I work in WordPress with the divi theme, I found it's easiest to make this with custom code so I'm using a Divi code module for the HTML and writing the CSS in WordPress Appearance > Customize > Additional CSS.

Image of the grid. I'm in the inspector here so it properly fits in the picture

HTML:

<section>
    <div class="grid-container">
    <div class="grid-img-1">
      <img src="/wp-content/uploads/2023/05/PC-grid-grapes.svg">
    </div>
    <div class="grid-img-2">
      <img src="/wp-content/uploads/2023/05/PC-grid-barrels.svg">
    </div>
    <div class="grid-img-3">
      <img src="/wp-content/uploads/2023/05/PC-grid-pouring.svg">
    </div>
    <div class="grid-img-4">
      <img src="/wp-content/uploads/2023/05/PC-grid-grapefield.svg">
    </div>
    <div class="grid-link-1"></div>
    <div class="grid-link-2"></div>
    <div class="grid-link-3"></div>
    <div class="grid-link-4"></div>
  </div>
</section>

CSS

/* Card grid */

.grid-container {
    display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
  grid-auto-flow: row;
}

.grid-img-1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-img-2 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-img-3 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-img-4 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 4;
    grid-column-end: 5;
}

.grid-link-1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-link-2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-link-3 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-link-4 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
}

I've tried the basics of height: 100%;, margin/padding: 0;, box-sizing: border-box;, each with and without !important just to see what worked, but nothing did.

While inspecting I also removed and added styling with the little checkbox to see if I could find anything that would cause this problem, but I couldn't find anything either.

I thought maybe the image didn't fully load in so the scale of the div would be correct, but the size of the image is as intended so I don't think that's it.

I hope it's a problem that CSS can fix because besides the fact that I'm not that skilled in JavaScript, I don't know where I could write my JavaScript code within WordPress/Divi

Jaywesterlow
  • 3
  • 3
  • i check your code and its working fine for me, i did not see any space, do you have screenshot or site where we can see the exact issue. – Xaib Aslam May 06 '23 at 13:01
  • the website is petitceller.nl. I have 2 grids on this site that look alike because i tried making it with the divi builder but I quickly found out that wouldn't work. The section i'm working on is the second one. – Jaywesterlow May 06 '23 at 13:30

2 Answers2

0

I have tried to recreate the error you are having however it doesn't seem to work! Can you share the sizes of the images involved? You can try this code on the images:

img {
height: 100%;
width: 100%;
display: block;
}

Here is a codepen on how it looks.

Jonathan Amobi
  • 26
  • 3
  • Thanks for the quick response. the images are all svg's of 480 x 540. I tried your code however, it unfortunately didn't seem to change anything – Jaywesterlow May 06 '23 at 13:08
0

images by default have display: inline by default (so it is kind of treated like a text) and browsers add a little bit of space in their container to fix the overall baseline adjustment of other inline elements. To remove it, you simply need to add display: block to your image.

Look at this code as an example: The first div has an extra space but the second one does not.

div {
  background-color: red;
  margin-bottom: 10px;
}

.image-block {
  display: block;
}
<div>
  <img src="https://placehold.co/600x200" />
</div>

<div>
  <img src="https://placehold.co/600x200" class="image-block" />
</div>

If you still see unwanted space at the bottom, it might be because of the wrong viewBox for your svg files. Try to open the SVG file and edit its viewBox attribute. The fourth value determines the height, you can reduce it a bit and see if it works.

pouria
  • 949
  • 8
  • 21
  • The previous contributer also asked me to try this. However, it didn't work. Thanks to your explenation I understand it a bit better and it seems like that should be the awnser but it doesn't change anything. – Jaywesterlow May 06 '23 at 13:25
  • you're welcome :). Also try to change the viewBox. Btw, you can also attach a screenshot to your question so that you'll get even better help. – pouria May 06 '23 at 13:31
  • @Jaywesterlow I just checked your website. I simply added `display: block` to the images and the space is gone. are you sure you applied it correctly? – pouria May 06 '23 at 18:37
  • I made a mistake with the selectors while implementing the ``display: block;`` code which is why I thought it didn't work. Sorry everyone! You all gave me the right awnser ages ago. – Jaywesterlow May 07 '23 at 19:15