Solved

Make Mobile Product Image Full Width Of Screen Dawn theme

MrStoney
Tourist
6 0 2

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

Help1.jpg

 

EXAMPLE: THIS IS WHAT I WANT IT TO LOOK LIKE

 

help2.jpg

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6076 1461 1800

This is an 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:

Made4uoRibe_0-1711997778513.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
6076 1461 1800

Hi @MrStoney 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


MrStoney
Tourist
6 0 2
Raj-webdesigner
Shopify Partner
253 57 60

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

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


MrStoney
Tourist
6 0 2

That didn't seem to change anything

MrStoney
Tourist
6 0 2

Help1.jpg

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

Made4uo-Ribe
Shopify Partner
6076 1461 1800

This is an 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:

Made4uoRibe_0-1711997778513.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


MrStoney
Tourist
6 0 2

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

 

Columbus_Themes
Shopify Partner
116 8 15

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.
If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!