Align multiple image shortcodes horizontally and centered on both desktop and mobile

[merlendson]

Hello, I hope this message finds you well!

I am using the following code for my social media icons on the Pro theme (I removed the src and href for privacy):

[x_image type=“custom” src=“examplesrc” alt=“facebook-link” link=“true” href=“example href” title=“Like” target=“blank” info=“none” info_place=“top” info_trigger=“hover”]

[x_image type=“custom2”
src=“examplesrc” link=“true” href=“examplehref” title=“Follow” target=“blank” info=“none” info_place=“top” info_trigger=“hover”]

[x_image type=“custom3” src=“examplesrc” alt=“twitter-social-icon” link=“true” href=“examplehref” title=“Follow” target=“blank” info=“none” info_place=“top” info_trigger=“hover”]

These shortcodes are within a ‘feature box’ blockgrid consisting of 2 rows and three columns (all blocks are using feature boxes). The images are in the 4th blockgrid (or the block that is immediately below blockgrid 1).

As it stands the images align in the center vertically. I would like them to align horizontally and centered. I previously used float=“left” on each of the shortcodes which seemingly aligned them horizontally and vertically within the feature box – however, on mobile apps the icons were arranged on the left hand side and were not centered.

Any help would be greatly appreciated! Thank you!

[paul.r]

Hi,

You can try adding an inline style display:inline-block;

eg.

[x_image style="display:inline-block;" type="custom" src="examplesrc" alt="facebook-link" link="true" href="example href" title="Like" target="blank" info="none" info_place="top" info_trigger="hover"]

[x_image style="display:inline-block;" type="custom2" 
src="examplesrc" link="true" href="examplehref" title="Follow" target="blank" info="none" info_place="top" info_trigger="hover"]

[x_image style="display:inline-block;" type="custom3" src="examplesrc" alt="twitter-social-icon" link="true" href="examplehref" title="Follow" target="blank" info="none" info_place="top" info_trigger="hover"]

Then add this in X > Launch > Options > CSS

p:empty {
    display:none;
}

Hope that helps.

[merlendson]

This was extremely helpful! Thank you so much – the three images are now horizontally aligned on both desktop and mobile. The only issue now is that the second image – the instagram image – is slightly off in it’s vertical alignment compared to the other two images. Is there a way to shift this image upwards slightly?

I am attaching an image so you can see what I mean.

I sincerely appreciate your assistance

[jade]

Hi there,

Please try using one class for the three image links and update the CSS code to set the left and right margin for the image to add spaces between them.

For example, add the class x-img-custom to the three images then add use this code in the custom CSS:

.x-img.x-img-custom {
    margin: 25px 5px;
}

Hope this helps.