Make Mobile Product Image Full Width Of Screen Dawn theme

[MrStoney]

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

[Made4uo-Ribe]

Hi @MrStoney 

Would you mind to share your store URL? Thanks!

[MrStoney]

https://www.ambodie.com/

[Raj-webdesigner]

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;
    }
}

[MrStoney]

That didn't seem to change anything

[MrStoney]

Was that the code to remove the padding around the image?

[DorianvdSpcd]

Hello, 
I'm currentyly facing the same obstacle, however the code did not work for me... Would you know what the issue is?

[Made4uo-Ribe · Accepted solution]

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!

[MrStoney]

is there a way to apply this change to all the products in the store?

[DorianvdSpcd]

Hello, 
I'm currentyly facing the same obstacle, however the code did not work for me... Would you know what the issue is?

[Made4uo-Ribe]

Hi @DorianvdSpcd 

Would you mind to share your store URL? Thanks!

[DorianvdSpcd]

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...

[Made4uo-Ribe]

Its password protected. 

[DorianvdSpcd]

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

[Made4uo-Ribe]

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:

[DorianvdSpcd]

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.

[DorianvdSpcd]

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? 

- I have also send you a private message actually displaying the issue.

Kind regards Dorian van der Spoelcordacc

[DorianvdSpcd]

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

[Columbus_Themes]

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.