Docs

[Kristan P]

Hi there

I’m having issues when trying to align three promo boxes in a horizontal row. I have put them in 1/3 columns but the pictures won’t adapt to the columns. (This is seen on the url with the 3 big pictures of the microphone at the bottom of the page.)

I have tried reducing the image size but then they don’t stay in their designated columns and instead stack on top of each other.

URL: http://www.motionsonic.co.uk/test1/

Here’s my code.

[column type=”1/3″][promo image=”http://www.motionsonic.co.uk/wp-content/uploads/2014/06/IMG_55821.jpg” alt=”example”] bla bla bla [/promo][/column]

[column type=”1/3″][promo image=”http://www.motionsonic.co.uk/wp-content/uploads/2014/06/IMG_55821.jpg” alt=”example”] bla bla bla [/promo][/column]

[column type=”1/3″ last=”true”][promo image=”http://www.motionsonic.co.uk/wp-content/uploads/2014/06/IMG_55821.jpg” alt=”example”] bla bla bla [/promo][/column]

Thanks a lot

Kristan

[Darshana]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-promo {
    margin-bottom: 0;
}

Hope that helps.

[Kristan P]

Hi there

This doesn’t seem to have helped at all?

[Joao]

Hi There,

The reason why they are not aligned perfectly is because the third picture has a different size from the other two.

Edit the third picture to have the same height and width as the first two and they will look good.

Hope that helps,

Joao

[Author]

Posts