Narrative Theme: Mobile View Padding Not Properly Aligned

Technical Q&A
1

Hi everyone! Good day and I hope everyone’s safe especially this time of pandemic!

If I may ask the experts in our community here on Shopify, I’ve tried to code responsive padding on mobile view for my narrative theme on theme.scss but it’s not working. So far, I’ve got the desktop view perfect but the padding on the left side is not responsive when I’m viewing it on mobile. This is on my product page, please see the screenshot below. Thank you in advance for a possible solution :wink:

mmazter_1-1622232104215.png
mmazter_1-1622232104215.png385×839 17.2 KB

https://vivusu.com/products/blush

PW: owdahp

2

Hello @mmazter ,

Welcome to the Shopify Community.

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

.product-template {
margin-left: 0px !important;
    padding: 0px 15px !important;
}
1 Like
3

Hi HardikDavra,

I appreciate your reply but it’s not working on the mobile view when I set the padding to 100px, the image and the text are not getting centralized and full screen on mobile view :disappointed_face:

4

@mmazter , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and remove this code at the very bottom of the file:

diego_ezfy_0-1622314733110.png
diego_ezfy_0-1622314733110.png716×564 9.81 KB

If that doesn’t work, only if it doesn’t work, then add the code below:

@media (max-width: 767px){
    [id] .product-template{
    margin-left: 0 !important;
    padding: 0 !important;
}
}

Kind regards,
Diego

1 Like
5

@mmazter Why are you setting padding left to 100px?

Please put my code and if you get any problem then please let me know.

1 Like
6

Hi Diego,

Thanks for that, it works like a charm :wink:
The only code I am missing is the

[id] .product-template

Thank you for this one :wink: I gave you a like!

1 Like