Reducing space between footer images with CSS

  • Resolved southeyblanton

    (@southeyblanton)


    5 years ago

    I have images in the footer of my wordpress site that are all in one single DIV container it appears.

    The images aren’t that wide but it appears extra margin/padding is causing them to bump each other creating a second row.

    Is there any way to use CSS to normalize the size of them and reduce the margin so they will all smoothly fit on one line side by side in the footer?

    • This topic was modified 5 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Dekadinious

    (@dekadinious)

    5 years ago

    Do you have access to the source code? It seems this is built with Bootstrap, so you could change this:

    <section class="widget media_image-4 widget_media_image col-md-4 col-sm-6">

    To this:

    <section class="widget media_image-4 widget_media_image col-md-3 col-sm-6">

    For the four sections. Either that, or you could just override the whole style with CSS, turning the footer into a grid. This should get you started for desktop styles, but you will need to adjust somewhat, I think:

    .content-info .footer-container.container .row {
  display: grid;
  grid-auto-flow: column;
}

.content-info .footer-container.container .row section {
  display: grid;
  width: 100%;
  align-content: center;
}
    Thread Starter southeyblanton

    (@southeyblanton)

    5 years ago

    Thanks so much! This did the trick. I’ll need to edit the images themselves to make them more uniform and identical in size and shape but this immediately fixed the problem.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Reducing space between footer images with CSS’ is closed to new replies.