Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Make Mobile Product Image Full Width Of Screen Dawn theme

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
9039 2160 2665

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 23 (23)

Made4uo-Ribe
Shopify Partner
9039 2160 2665

Hi @MrStoney 

Would you mind to share your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
MrStoney
Tourist
6 0 2
Raj-webdesigner
Shopify Partner
349 87 82

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

Are you looking for Shopify Developer then your search is over I will help you


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

:-

❤️Tip❤️

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?

DorianvdSpcd
Tourist
12 0 0

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
Shopify Partner
9039 2160 2665

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
MrStoney
Tourist
6 0 2

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

 

DorianvdSpcd
Tourist
12 0 0

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
Shopify Partner
9039 2160 2665

Hi @DorianvdSpcd 

Would you mind to share your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
DorianvdSpcd
Tourist
12 0 0

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
Shopify Partner
9039 2160 2665

Its password protected. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
DorianvdSpcd
Tourist
12 0 0

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
Shopify Partner
9039 2160 2665

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:

Made4uoRibe_0-1717422197412.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
DorianvdSpcd
Tourist
12 0 0

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
Tourist
12 0 0

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
Tourist
12 0 0

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

Made4uo-Ribe
Shopify Partner
9039 2160 2665

Hi @DorianvdSpcd 

Did you already solve the problem?

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Alexbunce1
Tourist
5 0 1

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. 

Alexbunce1
Tourist
5 0 1

@Made4uo-Ribe  I have £5 in PayPal for you if you're able to help

Made4uo-Ribe
Shopify Partner
9039 2160 2665

Hi @Alexbunce1 

Would you mind sharing your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Alexbunce1
Tourist
5 0 1

@Made4uo-Ribe can you add my discord alexbunce1 ?

 

Columbus_Themes
Shopify Partner
125 9 16

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!