Help with Responsive Image and Video Sizing in Product Descriptions

Solved

Help with Responsive Image and Video Sizing in Product Descriptions

PD31
New Member
11 0 5

Hello guys!

 

I'm working on resizing images in the product description section (not the main product image grid, but within the text description). The images look great on desktop but appear compressed and distorted on mobile. When I adjust the size to fit mobile screens, they become too small on desktop.

 

I've read that it's possible to show different images (with different sizes) for mobile and desktop on the same product page. Could anyone share code for implementing this, and let me know where to add it?

 

I'm also trying to do the same with embedded YouTube videos in the product descriptions, ensuring they display well on both desktop and mobile.

 

I'm using the Empire theme, and my store's homepage is https://www.astralwingdrones.com/.

 

Thanks in advance for any guidance!

Accepted Solution (1)
DaisyVo
Shopify Partner
245 42 36

This is an accepted solution.

Hi @PD31 

 

Thank you for sharing it. You can follow my detailed here to fix it: 

 

Step 1: Go to your Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there. Then save the change

 

Here is the code to add in Step 3: 

 

@media screen and (max-width: 768px){
.station-tabs-tabcontent img {
    height: auto !important;
}
}

 

 

image (2).png

 

Please let me know if it works. Thank you so much!

 

Best,

Daisy - Avada Support team.

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Explore other solutions
here. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

akshay_bhatt
Tourist
45 3 4

Hi @PD31 ,

To achieve responsive resizing for images and embedded YouTube videos in your product description on the Empire theme, we can use CSS to apply different styles for mobile and desktop views. Here’s a step-by-step approach:

1 Responsive imege resizing

Add the following code to the theme.scss.liquid or base.css file (usually under Online Store > Themes > Edit code in Assets😞

/* Responsive Image Styling in Product Descriptions */
.product-description img {
  width: 100%;
  height: auto;
  max-width: 800px; /* Sets a maximum size for larger screens */
}

/* Mobile-specific adjustments */
@media only screen and (max-width: 768px) {
  .product-description img {
    max-width: 100%; /* Ensures images fill the screen width */
  }
}

2 Responsive YouTube Video Embedding:

For embedded YouTube videos, you can use a similar approach to ensure they scale properly. Add this CSS right below the previous code:

/* Responsive YouTube Embedding */
.product-description iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Maintains a responsive video aspect ratio */
  max-width: 800px; /* Maximum width on desktop */
}

/* Mobile-specific adjustments */
@media only screen and (max-width: 768px) {
  .product-description iframe {
    max-width: 100%; /* Fits video to mobile screen */
  }
}

save the changes. and check the result.

 

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

 

Thanks & Regards

Akshay Bhatt

 

- Need a Shopify Specialist?
- Custom Design | Advanced Coding | Store Modifications
- Email: akshay.bhatt9113923240@gmail.com
PD31
New Member
11 0 5

Hello @akshay_bhatt 

 

Thank you for your help! Unfortunately it didn't work for me. Not sure why.

DaisyVo
Shopify Partner
245 42 36

Hi @PD31 

 

Could you please share the product link with me? So we can investigate it further? 

 

If possible, please share with us the image that encountered an issue as well. Thank you!

 

Best,

Daisy - Avada Support Team.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Explore other solutions
here. Live Chat Support is available 24/7.
PD31
New Member
11 0 5

Hello @DaisyVo,

 

So it's not really a specific picture. It's more of a specific size of pictures that I wish to use on my product pages. A good example of this could be this product here: DJI Mavic 3 Thermal Care Plus

 

If you click on the Features tab and scroll down, you’ll see three images in the description. They display well on desktop but become compressed and distorted on mobile due to the smaller screen width.

 

For this reason, I am looking for a way (implementing a code, most likely) to display different images on mobile and desktop, which I would size accordingly. If not possible, then I would seek for at least a way to make the images responsive to the screen size they are displayed on, so they would look great on both devices.

 

Thank you for your time!

 

 

DaisyVo
Shopify Partner
245 42 36

This is an accepted solution.

Hi @PD31 

 

Thank you for sharing it. You can follow my detailed here to fix it: 

 

Step 1: Go to your Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there. Then save the change

 

Here is the code to add in Step 3: 

 

@media screen and (max-width: 768px){
.station-tabs-tabcontent img {
    height: auto !important;
}
}

 

 

image (2).png

 

Please let me know if it works. Thank you so much!

 

Best,

Daisy - Avada Support team.

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Explore other solutions
here. Live Chat Support is available 24/7.
PD31
New Member
11 0 5

Hello @akshay_bhatt,

 

It did work! Great job, really. Thank you very much for your time on this. My website looks much better this way.