Don't share personal details or Shopify account information

[David235]

Don't share personal details or Shopify account information

[BSS-TekLabs]

Hello @David235 . What is the problem you are having?

[David235]

There is no problem with the pictures and videos on the PC, but on the mobile phone, the pictures and videos are not aligned, resulting in large blank spaces between the pictures and titles.

This is my website: wholesalecrystalstone.com
You can check out my product page

[BSS-TekLabs]

- Here is the solution for you @David235 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media screen and (max-width: 749px) {
    media-gallery .slider.slider--mobile {
        max-height: 370px !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[David235]

Is this all we can do?

[BSS-TekLabs]

That's right. Is there anything else you'd like to edit?

[David235]

Can the product image be title aligned, and the video be shown in its entirety?

[David235]

I see that the video and pictures can be slid, so the video cannot be fully displayed.

[BSS-TekLabs]

<style>
@media screen and (max-width: 749px) {
    media-gallery .slider.slider--mobile {
        max-height: 370px !important;
    }
.media>img, .media>video, .media>internal-video video {
    max-height: 370px !important;
    object-fit: contain !important;
}
}
</style>

Yes, Can you replace to this code @David235 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[David235]

I think it still doesn't work, so I'll change the video size format. This is not user-friendly at all.

[BSS-TekLabs · Accepted solution]

<style>
@media screen and (max-width: 749px) {
    media-gallery .slider.slider--mobile {
        max-height: 370px !important;
    }
.media>img, .media>video, .media>internal-video video {
    max-height: 370px !important;
    object-fit: contain !important;
}
.product-media-container .media {
    padding-top: 370px !important;
}
}
</style>

Please replace to this code @David235 

[David235]

Awesome!! Thank you

[BSS-TekLabs]

Glad to help you. Have a good day @David235 .