Re: make the image a little longer

Solved

make the image a little longer

nerveconcepts
Excursionist
36 0 2

How can I make the image a little longer muestra 8.pngas shown in the image?

 

Accepted Solution (1)
Xipirons
Shopify Partner
136 25 34

This is an accepted solution.

Please open Online store > Themes > Edit code > open base.css file, add this code at the bottom :

.product__media.media--transparent .image-magnify-lightbox {
object-fit: contain;
}

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

View solution in original post

Replies 17 (17)

Xipirons
Shopify Partner
136 25 34

Hi @nerveconcepts 

 

Could you please share the URL of this page so that I can check what is possible to do ?

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Xipirons
Shopify Partner
136 25 34

The back view photo is not in the same format as the front view photo. The simplest solution is to crop your photo in the same way as the second image with the front view of the t-shirt

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

nerveconcepts
Excursionist
36 0 2

what I mean is that I would like the image to end lower, because when I put the image even shorter or longer it resizes itself and does not change anything.

Xipirons
Shopify Partner
136 25 34

Attached is an example of the cropping to perform, and your problem will be solved.

Both photos must be framed in the same square format. The photo you're having trouble with is rectangular

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Xipirons
Shopify Partner
136 25 34

Xipirons_0-1711878112228.png

Here is. the example of the cropping in a square format

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

nerveconcepts
Excursionist
36 0 2

I don't want the square format of the image, I want the image to be a little bit longer at the bottom of the screen, as shown in the image.muestra9.png

Xipirons
Shopify Partner
136 25 34

Ok I understand, which theme do you use?

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

nerveconcepts
Excursionist
36 0 2

Dawn

Xipirons
Shopify Partner
136 25 34

This is an accepted solution.

Please open Online store > Themes > Edit code > open base.css file, add this code at the bottom :

.product__media.media--transparent .image-magnify-lightbox {
object-fit: contain;
}

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

nerveconcepts
Excursionist
36 0 2

the height is correct but the width is not

Captura de pantalla 2024-03-31 a la(s) 3.30.58 a.m..png

i want something like this

Captura de pantalla 2024-03-31 a la(s) 2.45.18 a.m_.png

Xipirons
Shopify Partner
136 25 34

The code I've given you displays a "full" view of the photo as you've designed it (and it's a rectangle)... If you want to display a square photo, you'll need to create a square image of the T-shirt 🙂

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

nerveconcepts
Excursionist
36 0 2

thank you!! it works

nerveconcepts
Excursionist
36 0 2

hey bro one last thing how can I make the next image the same size and aligned just below the first image?

muestra 10.png

Xipirons
Shopify Partner
136 25 34

To to this, add this code at the bottom of base.ccs file :

(and you have to use the same format for the two images)

@media screen and (min-width: 990px) {
  .product--stacked .product__media-item {
    max-width: 100%;
  }
}

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

nerveconcepts
Excursionist
36 0 2

Captura de pantalla 2024-03-31 a la(s) 5.23.11 a.m..png

it still looks like this

Xipirons
Shopify Partner
136 25 34

Try this, this will force the template to respect the proposed code:

@media screen and (min-width: 990px) {
   .product--stacked .product__media-item {
    max-width: 100%!important;
  }
}

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed