Solved

Make The Product Image Bigger On Mobile Phone / Focal Theme

jtorres
Explorer
66 0 17

Hello, I would like to make the product image bigger on the mobile format only.

This is how it currently looks:

Captura de pantalla 2022-10-31 a las 14.11.52.png

 

This is how I would like it to look:

Captura de pantalla 2022-10-31 a las 14.16.41.png

 

This is my website: https://lovelmexico.com/products/depilador-nuva-skin

Thank you very much for your help!

 

Accepted Solutions (2)
ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

@jtorres 

Follow this way to correct your issue:

  • Open file Theme editor > assets > theme.css
  • Add this code at the bottom of the file
@media screen and (max-width: 999px) {
	.product.product--thumbnails-left flickity-carousel .product__media-item {
	    padding-left: 0 !important;
	    padding-right: 0 !important;
	}
}

try it and let me know

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

Hi @jtorres 

 

Add this code

@media screen and (max-width: 740px) {
  .product:not(.product--featured) {
    margin-top: 0 !important;
  }
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

Replies 7 (7)

PageFly-Richard
Shopify Partner
4302 975 1629

Hi @jtorres 

I’m Richard Nguyen - CRO Expert at PageFly, I’d like to suggest this idea:

 

it looks like your photo is at 342x342 size, please try with a larger size

 

RichardNguyen_0-1667225895444.png

 

 

Hope you find my answer helpful!

Regards,

Richard-pagefly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

@jtorres 

Follow this way to correct your issue:

  • Open file Theme editor > assets > theme.css
  • Add this code at the bottom of the file
@media screen and (max-width: 999px) {
	.product.product--thumbnails-left flickity-carousel .product__media-item {
	    padding-left: 0 !important;
	    padding-right: 0 !important;
	}
}

try it and let me know

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
jtorres
Explorer
66 0 17

@ExpertRookie It worked perfectly, thank you so much.

There is only one small problem, there is a white space on top, between the header and image

Captura de pantalla 2022-10-31 a las 17.18.46.png

How could I fix this?

ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

Hi @jtorres 

 

Add this code

@media screen and (max-width: 740px) {
  .product:not(.product--featured) {
    margin-top: 0 !important;
  }
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
jtorres
Explorer
66 0 17

Thank you so much, it worked perfectly!

 

ExpertRookie
Shopify Partner
1518 249 315

@jtorres 

You are welcome

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
Melinda5
Explorer
52 3 11

Hello @ExpertRookie would this solution work on Dawn theme as well? This is my store url: https://onyn2drfmq5grb84-26499285045.shopifypreview.com

I also created a similar thread, but never received any guidance, hoping you can help me on this! Thanks