A user wants to remove padding around product images on mobile view in Shopify’s Dawn theme to make them full-width, providing before/after screenshots to illustrate the desired outcome.
Initial Solutions Provided:
.page-width, .product-media-container, and header elementsbase.css or using Theme Settings > Custom CSS@media queries for screens under 749-767px widthKey Implementation:
One solution successfully removed padding by targeting:
.grid--peek.slider left margin.slider__slide top marginsection#MainProduct right paddingThis was confirmed working by one user with visual proof.
Ongoing Issues:
Status: Discussion remains active with unresolved cases. Users continue seeking working CSS solutions, with some offering payment for assistance.
I want to change the image size on my mobile view only, not really the size I just wanna remove the padding around the image to make it the full width and height of the screen.
Ive attached examples to show what im trying to figure out, im using the newest version of Dawn
EXAMPLE: THIS IS WHAT I HAVE
EXAMPLE: THIS IS WHAT I WANT IT TO LOOK LIKE
Hi @MrStoney
Would you mind to share your store URL? Thanks!
Add This Code In Edit Code > Base.css File
@media screen and (max-width:767px) {
.header__heading-logo{
width: 100%;
}
.header__heading-link{
padding: 0 !important;
}
}
That didn’t seem to change anything
Hey there,
On your Theme Settings, at the bottom you can see “Custom CSS”
Add:
.product-media-container.constrain-height.media-fit-contain {
width: 100%;
}
Let me know how things went.
Thanks, for the info. Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
section#MainProduct-template--16666186809524__main .page-width {
max-width: 100%;
padding: 0;
}
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
is there a way to apply this change to all the products in the store?
Hello,
I’m currentyly facing the same obstacle, however the code did not work for me… Would you know what the issue is?
Would you mind to share your store URL? Thanks!
Hi, thanks for the immense quick reply, I didn’t expect it to be this fast! Anyways, here is the URL:
https://525515-2c.myshopify.com/products/airtoss
By the way I don’t know if it matters alot to you, but it’s mainly the phone view where I can’t seem to be able to remove the upper and side padding from…
Hello,
I’m currentyly facing the same obstacle, however the code did not work for me… Would you know what the issue is?
Its password protected.
Oh shoot, that’s my bad I thought I had removed it, but apparently not, my apoligies. I just removed it
Just to be sure it’s the same store, this is the correct link:
https://525515-2c.myshopify.com/products/airtoss
No worries,
check this one then.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (max-width: 749px) {
.grid--peek.slider .grid__item:first-of-type {
margin-left: 0px;
}
.slider.slider--mobile .slider__slide {
margin-top: 0px;
}
section#MainProduct-template--21669477941572__main .page-width {
padding-right: 0px;
}
}
And Save.
result:
It worked!!! Thank you so much, I have been trough trial and erros myself and did eveyrthing but succeed haha. Anyways thanks again for helping me out here, it’s highly appriciated over.
Hi again,
I wanted to thank you personally again for helping me out with the custom code to make the product image full width, which it, did but it also unfortunately, I just now noticed, affects the enitre page widh for some reason even though the page itself is not targeted.
It was happedend right after I implemented the code gave me. I already tried to change up @media screen to @media only screen, which did nothing I’m sad to say, I’m sure it’s a very tiny tweek, but I as a non-coding expert wouldn’t know 
Anyways I was just hoping you could help me out one last time, but I completely understand if not and hopefully this will be the last time I will have to bother you again haha - Almost forgot to add but there is this weird line above the image, it should not appear, I’ll go check out if it has something to do with the upper section, but you can’t tell me right off the bat what is causing it right?
Kind regards Dorian van der Spoelcordacc
Add: it won’t let me send you a private message, but if you check the site out in mobile view and slide to the left and right you, also checking the shopping cart, you’ll see what the issue is.
Kind regards Dorian van der Spoelcordacc
Hello, are you able to help me? I have tried every solution mentioned in this thread and none seem to work. not sure if anything has changed in the last few months. I am using the dawn theme.
