Removing white space on products (mobile) - Dawn theme

[Astubbs]

Hi, I need remove the white padding around the images on my product listings, on mobile view. I’ve reduced the padding to 0 on theme editor but it’s still there. Pics below. Can anyone help?

Thanks! Alison

Web URL: astubbingsart.co.uk

[JakeDoran]

Hi @Astubbs

Website looks cool but to me its seem to be your css and the page-width class. When i take off the padding it seems to remove the white space on the side for you.

I would make a css targeted at a certain media size for mobile say 749px

Example would be:

@media only screen and (max-width: 749px) {
     .page-width {
  max-width: var(--page-width);
  margin: 0 auto;
}
}

This seems to work for me when I edit the code in my browser.

Example shown below

The line that is affecting the mobile site is page-width on line 243 in base.css

In saying that you will need to edit a few css inside of the targeted mobile section. I would edit the:

.header-wrapper to have padding: 20px

and your product-info-container to have padding: 20px;

Hope this helps.

[Astubbs]

Thanks Jake! I’ll try what you have said, although I have no idea about coding so not sure if it’s a bit too technical for me

[JakeDoran]

@Astubbs that is all good, if you get stuck DM me and ill be happy to help you out.

[Astubbs]

Thank you! I’ll see how I get on

[dmwwebartisan]

@Astubbs

Please add the following CSS code to your assets/base.css bottom of the file.

@media only screen and (max-width: 749px) {
   .section-template--15832975212776__featured_collection-padding {
    padding: 0px !important;
}
}

Thanks!

[Astubbs]

Thank you, that didn’t work unfortunately- It just removed the width padding on the mobile homepage. I am just looking to remove the white space above and below the product images when you click on a product

[dmwwebartisan]

@Astubbs

Please share the screenshot of what you want!

Thanks!

[Astubbs]

This is the white space i would like to remove - above and below the photo when i open a product