Centering image with scalability in Column

[windhover4]

I am using a two-coulun layout for a section of my Long Page site.

The image in the left column is intentinally small to match components of right side.

However, depending on scaleability of the page on desktop, tablet or phone, as the left image becomes smaller it drops to the bottom of the column.

Is there a better way to do this?

---

Desktop screenshot, and still not as centered as I would like:

Smaller Scale and drops to bottom:

[windhover4]

Thank you for a look at this. Almost done with site and need this information.

[friech]

Hi There,

Thank you for writing in, to vertically center the image. Please add this on X > Launch > Theme Options > CSS

@media (min-width: 768px) {
	.flex-parent {
	  display: flex !important;
	  flex-direction: row;
	  flex-wrap: nowrap;
	}

	.flex-child {
	  display: flex !important;
	  align-items: center;
	  justify-content: center;
	}
}

Then on the left Column (where your image is placed) add a CLASS flex-child, and then on the Row of that column add a CLASS flex-parent.

On other note, you assigned an invalid ID to your ROW and COLUMN (https://prnt.sc/fsl1od), please remove that, to avoid potential syntax error.

Hope it helps,
Cheers!

[windhover4]

Thank you. I made those entries and corrections. The positioning of the image in the left column is much improved, especially in larger screen sizes. In very narrow screen size on desktop the image moves to the top, rather than the center.

Would you be so kind as to take another look and see if I made the changes you contemplated correctly?

Thank you.

[christopher]

Hi there,

I checked your website. In the column options section, you had vab, flex-class which is wrong. if you want to add multiple classes just separate them with space. So I changed that to:

And the result is:

Thank you.