Attaching an image to the product

hi! i am trying to attach an image to the product, how can i adjust the size of the image when it is published? the screen shot i uploaded is  what happens when i fill up the form using my mobile phone.. 

this screenshot is how i want it to look like. how do i make the pictures/image just like that?

The products in your screenshot are created using the new product list, please see my screenshot below.

You can use that to list your items.

This is what the (sample) image looks like, i want it to be small and just on the left side, but i dont know how to resize it?
Sent from my iPhone
...

Hello,

Thank you for your message.

In this case, the way that you are seeing the image in the product list is a new layout for mobile devices.

I will look for a CSS code so we can change the style to fit your needs, I'll update you on this same thread as soon as I have some news.

Hello,

Thank you for your message.

Please add the following CSS code to your form:

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .image_area {

   min-height: 48px!important;

    width: 15%!important;

    height: 0%!important;

    margin-left: 39px!important;

}

}

Complete guide: How-to-Inject-Custom-CSS-Codes.

If you need any further assistance, please let us know. We will be happy to help.

Hi, i tried the css u gave me, this is what happened, can the text go on the right side of the image?
Sent from my iPhone
...

Unfortunately we are unable to see the screenshot you have shared. Please share the screenshot again, and we will take a look. 

Do want the product text to be displayed on the right side of the image?