Make product image smaller on mobile product page

[KalleSpang]

Hi everyone!

I've set the size of my product images to "medium" on the product page and it all looks good on desktop.
But I think it's a little too big on mobile and would like to make it smaller on just mobiles. The "small" alternative would suit better on mobile, or if it is possible to set it to
a given percent.

Is there a way to do this?
I've tried to have a look at the code and changed around a bit, but I can't really find anything that works.

Best regards,

[KetanKumar]

@juiceindia 

if possible to give theme access so i will check and update

[chris214]

Hi @KetanKumar 

 

could you help to adjust the product image so that the add to cart button is visible above the fold for mobile?

I need the product photo to be smaller on mobile.

I want mobile users to see the button when the page opens.

thank you so much in advance

chris

[KetanKumar]

@chris214 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[chris214]

www.delidia.de

[chris214]

@KetanKumar 

the Flex theme allows for custom css https://help.outofthesandbox.com/hc/en-us/articles/360022329373

[KetanKumar]

@chris214 

do you need mobile-first screen show to add to cart button

[yaseeng8]

Hi Ketan Kumar.
I want your help please.

Kindly help me to resolve the issue.
I have Warehouse theme install on my store.

I have variations on almost all of the products.
What I want is,
1) I want to resize main image of product on product page to fit on mobile

2) Variation images at the left side of the main product image in short size

3) Product Name, Variation selector, Price, Add to Cart and Buy Now button all to be visible on page without scrolling.

Shop name: https://multisolution-pakistan.myshopify.com/
Email: yaseeng8@gmail.com

Please resolve my issue.

Screenshot attached of current product page display which needs to be adjusted for mobile friendly experience

An Example of ideal optimized product page from another website is below for reference

v

[KetanKumar]

@yaseeng8 

oh sorry for that issue you case difficult bcz to many deta your prodct name  also long product name see attachment 

[yaseeng8]

Please do some adjustment for resolving this issue. Ideal optimized layout also attached for reference 

 

[KetanKumar]

@yaseeng8 

oh sorry your all content too much longer but can you try this code add to cart button to show the first screen

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 640px) {
.product-form__payment-container {
    position: fixed;
    bottom: 0;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    z-index: 99999999999;
    background: #fff;
    left: 0;
    align-items: end;
    padding: 10px;
}
.product-form__payment-container .shopify-payment-button {
    margin-top: 0;
    margin-left: 10px;
}
}

[yaseeng8]

it does not make any optimization at all.
I did it the correct way by the way.

I have added bamaniyaketan.sky@gmail.com as in staff, please check and help me out

[yaseeng8]

Add to Card and Buy Now button are now ok, but image optimization and prices should be displayed without scrolling.
Please do this as well.
Thanks for your support and assistance

[KetanKumar]

@yaseeng8 

thanks i will check and let you know 

[DRAWMORETAGS]

Can you please assist.  I have tried to adjust the size of a clickable map and I cant figure it out. Its perfect on desktop, but way too large on mobile.  I cant find a theme.css file anywhere. I have a theme.liquid under layout and a theme-editor.js under asset.   Can someone please assist. The url im trying to fix is:

https://www.drawmoretags.com/pages/huntinfo-by-state

Thanks in advance.

[KetanKumar]

@DRAWMORETAGS 

can you send issue images 

[KCosm]

Is this still a working solution? I´d like to have smaller product images but ONLY for the mobile version. Is there a build in solution available meanwhile? 

[KetanKumar]

@KCosm 

can you please share url