Column shortcodes in footer content: make columns closer together

[COK]

Hi, I’ve put 3 logos in my footer content area. They would look nicer on desktop with less space between them. Is there a simple way to put the logos closer together so that they look more like this? https://imgur.com/a/KFcyt

here’s the html i’m using for my columns:

[column type="1/3"]<a target="_blank" href="https://tryveg.com"><img src="https://meatout.wpengine.com/wp-content/uploads/footer-try-veg-logo.png" alt="tryveg logo" width="155" height="34" class="aligncenter size-full wp-image-5374" /></a>[/column] 

[column type="1/3"]<a target="_blank" href="https://vegweek.com"><img src="https://meatout.wpengine.com/wp-content/uploads/footer-vegweek-logo.png" alt="vegweek logo" width="148" height="34" class="aligncenter size-full" wp-image-5561" /></a>[/column] 

[column type="1/3" last="true"] <a target="_blank" href="http://cok.net"><img src="https://meatout.wpengine.com/wp-content/uploads/footer-cok-logo.png"  alt="cok logo" width="148" height="34" class="aligncenter size-full wp-image-5375" /></a>[/column]

one idea is to use a 1/5 column (with the 3 logos in the middle columns and blank html on each end) but this doesn’t seem like best way to resolve. thanks

site: https://tinyurl.com/y6uoetjt

[nabeel]

Hi there,

Thanks for writing around! Please change your code to this:

[column type="1/3"]<a target="_blank" href="https://tryveg.com"><img src="https://meatout.wpengine.com/wp-content/uploads/footer-try-veg-logo.png" alt="tryveg logo" width="155" height="34" class="alignright size-full wp-image-5374" /></a>[/column] 

[column type="1/3"]<a target="_blank" href="https://vegweek.com"><img src="https://meatout.wpengine.com/wp-content/uploads/footer-vegweek-logo.png" alt="vegweek logo" width="148" height="34" class="aligncenter size-full" wp-image-5561" /></a>[/column] 

[column type="1/3" last="true"] <a target="_blank" href="http://cok.net"><img src="https://meatout.wpengine.com/wp-content/uploads/footer-cok-logo.png"  alt="cok logo" width="148" height="34" class="alignleft size-full wp-image-5375" /></a>[/column]

Let us know how this goes!

[COK]

Works on desktop but all smaller breakpoints are not too pretty:

[Album] Imgur

Thanks

[friech]

Hi There,

Thank you for writing in! instead of using the [column] shortcode, let’s have a plain HTML markup.

<div class="footerlogos">
  <a target="_blank" href="https://tryveg.com">
      <img src="https://meatout.wpengine.com/wp-content/uploads/footer-try-veg-logo.png" alt="tryveg logo" />
  </a>
  <a target="_blank" href="https://vegweek.com">
      <img src="https://meatout.wpengine.com/wp-content/uploads/footer-vegweek-logo.png" alt="vegweek logo" />
  </a>
  <a target="_blank" href="http://cok.net">
      <img src="https://meatout.wpengine.com/wp-content/uploads/footer-cok-logo.png" alt="cok logo" />
  </a>
</div>

Then add this to Theme Options > CSS

.footerlogos img {
	margin: 1em 2em;
}

The 1em there is the top and bottom space of the image, and the 2em there is the left and right space of the image. Feel free to adjust it.

We will provide additional custom CSS if needed.

Hope it helps,
Cheers!