Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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;
}
}
Please let me know if it works. Thank you so much!
Best,
Daisy - Avada Support team.
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
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.
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!
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;
}
}
Please let me know if it works. Thank you so much!
Best,
Daisy - Avada Support team.
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024