Change image size and price location on mobile

Solved
FindWorld
Explorer
145 6 68

Hello community,

Today I opened my store on my cell phone and noticed that the images of the products are smaller than on the computer, can you help me please? I've tried everything to find and I can't.

All products in desktop

FindWorld_0-1624273130627.png

 

All producs in home page desktop

FindWorld_1-1624273130500.png

 

And now on the cell phone, the images were very small, can you tell me how to enlarge it only on the cell phone?
And also friend, I lowered the price and the names to be aligned on the desktop, but now on the mobile it's too far, I need to raise the name and the price and increase the image size only on the mobile


All imagens in cell phone

FindWorld_2-1624273130055.jpeg

 

FindWorld_3-1624273130056.jpeg

 

FindWorld_4-1624273130057.jpeg

Thank you anyway.

0 Likes
Pallavi
Shopify Expert
2220 363 474

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
FindWorld
Explorer
145 6 68

My store: findworld.com.br
Password: edit321

Thanks for the help friend.

0 Likes
FindWorld
Explorer
145 6 68

Friend, sorry to ask again, if I'm bothering you, please talk.

I'm also trying to upload the product name to be on top of the image, can you tell me if this is possible?
I tried some code in css, but I couldn't.
I would like to do this only on the home page and all products page.

Thanks again and sorry to ask so much, I'm new to the market and I don't have much capital to invest, I'm using the community and some tutorials I find on the internet.

 

Pallavi
Shopify Expert
2220 363 474

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
.product-card__image-with-placeholder-wrapper {
padding: 0px !important;
height: auto !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
FindWorld
Explorer
145 6 68

Oh perfect, you're really nice dude, thank you so much.

Pallavi
Shopify Expert
2220 363 474

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
FindWorld
Explorer
145 6 68

I'm trying to change the location of the product name to the top of the image, if I can't I will create a post here again, thank you very much, you are very kind. Hug

0 Likes
dmwwebartisan
Shopify Partner
7343 1736 2318

@FindWorld 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px) {
.product-card__image-with-placeholder-wrapper {
    padding: unset!important;
    height: 216px;
    max-height: 145px;
    text-align: center;
}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes