Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Div with "height: 100%" greater than child

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

Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search