How to Center Product on Mobile

[kcnau9]

Hi! I just recently purchased Elementor Pro and I love it, but it is all still pretty new to me and I'm just learning as I go along by trial and error. I am not a developer so Elementor has been really awesome in helping me design my website.

I have run into a problem when I am trying to optimize my shop page for mobile devices.

I am using the products widget in Elementor to display my products. I would like the product to be displayed in the center of the page, but I cannot figure out how to do this. I have tried playing with alignments, margins, and paddings of all the columns and sections involved but I can't seem to get it to do what I want. I also can't resize the product image to make it larger so the edges fill up the column (the blue lines). As I eventually add new products, I want them to all be centered in a single column so users can easily just scroll down to view them all.

Here is a picture of my current mobile layout:

I don't often post on forums for help so please let me know how I can better describe my issue if it's unclear.

Thank you!
Kennedy

 

[Trayee Pradhan]

Hi I am also new with elementor. I tried some tips to resolve same issue. Either You can make 3 columns and place image into the middle one or you can change the settings of the image to absolute positioning and customise by dragging.