Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi,
I'm currently using Dawn theme, just wondering if there is a way to remove the spacing between product images in product description section? (See picture below)
Also, is it possible to auto resize the images in product description for mobile?
My store URL is https://hobbyzoneuk.co.uk/
Thank you in advance.
Solved! Go to the solution
This is an accepted solution.
Hi @hobbyzoneuk you can solve the space between images in your product description by adding CSS code below at the bottom of base.css in your store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css
.product .color-background-1 .page-width > div {
display: grid;
gap: 0;
justify-content: center;
}
This is the result
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Hi @hobbyzoneuk
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
img[style="float: none;"] {
display: block;
margin: 0 auto;
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi, How are you doing?
To remove the spacing between product images in product description section, you will need to edit the CSS code in your Shopify theme. In the theme editor, locate the CSS file containing the code related to the product description section.
Look for any lines of code that contain “margin” or “padding” and change the values to “0”.
This will remove any spaces between the images. To auto resize the images in product description for mobile, you will need to add a media query to the CSS code. This will allow the images to display in different sizes on different devices.
To do this, add the following code to the CSS file: @media only screen and
(max-width: 600px) { img { width: 100%; } }
This code will ensure that all images in the product description section will automatically resize to fit the width of the device.
If you need further assistance to getting this done, You can contact me at dynextic@gmail.com
This is an accepted solution.
Hi @hobbyzoneuk you can solve the space between images in your product description by adding CSS code below at the bottom of base.css in your store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css
.product .color-background-1 .page-width > div {
display: grid;
gap: 0;
justify-content: center;
}
This is the result
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi, I'm having the same issue and using the dawn theme. But, this solution didn't work for my store. Is there anything needs to be changed? Thank You!
This is an accepted solution.
Hi @hobbyzoneuk
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
img[style="float: none;"] {
display: block;
margin: 0 auto;
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024