full product image width on product page (mobile dawn theme)

getbodyfuel · ‎02-17-2025

My product images on mobile have a small gap on the sides, but I want them to be full-width like on this example: https://hears.com/products/brass-blue

PC is already fine, just need help with mobile version.

Also this would probably require to remove the rounder corners (on mobile) and remove the top padding (on mobile).

My product page: https://q0p3zs-fq.myshopify.com/products/test1

Heres how it is right now:

Heres how i want it to be:

EBOOST · ‎02-17-2025

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px) {
		#MainProduct-template--24670473060690__main  {
			padding-top: 0!important;
		}

		#MainProduct-template--24670473060690__main .product.product--large .product__media-wrapper{
			margin: 0 -1.5rem;
			max-width: calc( 100% + 3rem);
			width: calc(100% + 3rem);
		}

		#MainProduct-template--24670473060690__main .product.product--large .product__media-wrapper slider-component + slider-component {
			margin: 0;
		}

		#MainProduct-template--24670473060690__main .slider.slider--mobile .slider__slide {
			padding: 0;
		}

		#MainProduct-template--24670473060690__main .product__media-list .product__media-item {
			width: calc(100% - 3rem);
		}
	}

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips

getbodyfuel · ‎02-18-2025

Did not work

LizHoang · ‎02-17-2025

Hi @getbodyfuel

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media screen and (max-width: 749px) {
    .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0 !important;
    }

    .product__media-list .product__media-item {
        width: 100% !important;
    }
}

Result:

Best,

Liz

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

Check our Joy Rewards & Loyalty Program

getbodyfuel · ‎02-18-2025

Did not work.

Dan-From-Ryviu · ‎02-17-2025

You can do that by adding this code to theme.liquid file, after <head>

<style>
@media (max-width: 749px) {
   body .product__media-list .product__media-item {
        width: calc(100% + 3rem);
    }
   .product .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0;
    }
   .product .slider.slider--mobile {
        scroll-padding-left: 0;
        max-width: calc(100% + 3rem);
        gap: 0;
    }
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

getbodyfuel · ‎02-18-2025

Nice, the images are full width. Altough the thumbnails are a bit wierd, there are no padding in between them and another appears and cuts off. If its possible to make the thumbnails look like the example it would be awesome (dont have to).
Theres still rounded corners and padding att the top (shown in image)

full product image width on product page (mobile dawn theme)

full product image width on product page (mobile dawn theme)

Community Blog Articles