DELI theme- I want to move thumbnails from right to bottom of the main picture

I am so upset. I worked so much on this site. I’ve wrote a million css, and still does not work properly.
I don’t know, Storefront or Woocommerce, but something is going bad. Anyway, I saw on other forums that many people is asking about the product page unproper function in Woocommerce.
I’m about to add the payment gateway, I hope I will not have problems there ??

In the product page, the thumbnails appears on the right of the main image. I need them below the image.

Try adding this to your Child Theme style.css file, or Custom CSS plugin:

.single-product div.product .images .thumbnails {
    display: block;
    float: none;
}

Also I need to setup a bigger product image. I tryed in many ways, it didn’t work.

Try adding this to your Child Theme sytle.css file, or Custom CSS plugin:

.single-product div.product .images .woocommerce-main-image {
    width: 100%;
}

Make sure you enter the right settings in woocommerce settings product images hardcrop fields.

Andrew Nevins, thank you for your quick answer.
It’s almost working. The thumbnails are now bellow the image, but they are displayed in a column. I need them in a line.
Also the image became larger, but now is blured.
Please take a look on my website https://www.papercupsplates.co.uk

Marvel Labs, thank you.
I will never modify anything anymore on woocommerce settings product images because you need to regenerate thumbnails after that. And I swear I will not do it anymore again in my living days on Earth.

About Storefront Product Pagination: I found it and it looks beautiful.

Hi Andrew Nevins,

.single-product div.product .images .thumbnails {
display: -webkit-inline-box;
float: none;
}

worked for moving thumbnails in a line under the image.
Thank you.

Still the product image is blured.

It’s almost working. The thumbnails are now bellow the image, but they are displayed in a column. I need them in a line.

Can you provide a link to a page with the problem?

Also the image became larger, but now is blured.

Need to see the webpage

Andrew Nevins, thank you for your quick answer.
The link is:
https://www.papercupsplates.co.uk/product/4-oz-biodegradable-cup-gray/

By the way, can I make bigger thumbnails? Woocommerce settings product page has no effect.

The image itself is blurry: https://www.papercupsplates.co.uk/wp-content/uploads/2016/03/DSC07303-800×800.jpg

Thank you Andrew Nevins
Yes, it is. But before it wasn’t. Strange. I will try to photoshop it.
Bigger thumbnails? Can I make bigger thumbnails?