Make the image a little longer

[nerveconcepts]

How can I make the image a little longer

as shown in the image?

[Xipirons]

Hi @nerveconcepts

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

[nerveconcepts]

https://nerve-concepts.com/products/nerve-racing-club-tee

[Xipirons]

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

[nerveconcepts]

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]

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

[Xipirons]

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

[nerveconcepts]

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.

[Xipirons]

Ok I understand, which theme do you use?

[nerveconcepts]

Dawn

[Xipirons]

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;
}

[nerveconcepts]

the height is correct but the width is not

i want something like this

[Xipirons]

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

[nerveconcepts]

thank you!! it works

[nerveconcepts]

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

[Xipirons]

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%;
  }
}

[nerveconcepts]

it still looks like this

[Xipirons]

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;
  }
}