Align buttons under images

[Vox]

Hello, I am having issues with icon/button alignment under flexbox images. Looks fine on the desktop and even when testing through different screen sizes in the editor. But when actually viewing the page on my mobile, the buttons go out of line. I have attached images from within the editor and then viewing it on mobile

[tristup]

Hi @Vox,

Thanks for reaching out.
I have checked your website on my Android mobile device but didn’t find the problem you described here. If you are still facing the issue, please mention the device, browser name and version, and also the operating system you are using, that helps us to replicate the issue at our end.

Thanks

[Vox]

Hi Tristup,
Thanks for looking into the problem
The device is a Samsung Note 9 - Android version 10 - Chrome 106.0.5249.118 (updated to latest)

[ruenel]

Hello @Vox,

I would highly recommend that you edit your element structure and then insert a DIV element which will be a container for the Icons. You will have something like this:

You should then enable the Flexbox option in the DIV element so that the icons will be in one line only.

Kindly let us know how it goes.

[Vox]

That did the trick! Thank you very much

Now I need to learn how to keep image sizes the same using retina

[prakash_s]

Hell @Vox

Please note that when you enabled the Retina “eye” icon, the image will be displayed crisply in retina-enabled devices.

For example, if your content site width is 1200 pixels wide, you can upload a banner image dimension of 2400 pixels so that in the retina-enabled display, your banner image will be crisp.

In case you have not seen our image element doc please have a look at it.

Image | Themeco Docs

And if you wonder about the image proportion, kindly check out the explanation of @Kory in this thread:

• Image Element Proportional scaling

Hope this helps.