How can I vertically center an image in a multicolumn column?

[martijn18]

I have an image that is in a multicolumn next to a multicolumn which contains text. The images need to be vertically allinged in the center such that when the lenght of the text in the column next to it changes, the image is still in the middle of the column.

We are working in a inactive theme so here is the preview link:
https://veyfxwupm8clfdm9-82304368984.shopifypreview.com

[Made4uo-Ribe]

Hi @martijn18

Can you provide which multicolumn is this? Thanks!

[martijn18]

https://veyfxwupm8clfdm9-82304368984.shopifypreview.com/products/ornament-mavrud-reserve-chat-asena

Sorry, I gave you the homepage, this is the product page.

[Made4uo-Ribe]

Do you mean to look like this?

If it is, check this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.multicolumn-list {
    flex-direction: column;
}

@media only screen and (min-width: 749px){
.multicolumn-list__item.grid__item {
    width: 50%;
    max-width: 100%;
    margin:auto;
}
}

• And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[martijn18]

Thanks for the response, but that I not really how I meant it. I want it to look like this:

However, when the righter column changes the length of the text (metafield based). You get results like this:

And then it is not vertically centered anymore.

[Veritydibben]

Did you manage to fix this issue? I"m having the same problem and can’t make it right. Would love to know the code you used to correct it.