Right Black Border on Mobile [ Narrative Theme ]

[mirrormirror]

Hi there,

I just noticed that on mobile for my site (https://www.mirrormirrorbooks.com/) there is a right border that Ii not sure how to remove that.

looking forward to your feedback and support

[KetanKumar]

@mirrormirror 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site issue images,
So I will check and provide a solution here.

[suyash1]

@mirrormirror - add following css to the very end of your theme.scss file

.template-index .product-media--featured-product {margin-left: -210px;}

, this is for the particular section on home page only, that should remove that right border, you can adjust number -210 as per need 

[MS-WEB-DESIGNER · Accepted solution]

Dear @mirrormirror 

Hope this will help you

• From your Shopify admin, go to Online Store > themes
• Locate your current theme and then click Actions > Edit code
• After that in the Assets folder, click to open your theme.scss.liquid file
• Go to the very bottom of this file and paste the following code:

/* Start */
@media only screen and (max-width: 991px) {
#shopify-section-16085926615f29f3c1 . product-media--featured-product {margin-bottom: 0 !important; margin-left: 0 !important; }
#FeaturedProduct-16085926615f29f3c1 .product-media__image--featured-product {margin-top: 0 !important;margin-left: 0 !important;}
}

@media (max-width: 479px) {
.product-media--featured-product {margin-bottom: 0 !important;margin-left: 0 !important;}
#FeaturedProduct-16085926615f29f3c1 .product-media__image--featured-product {margin-left: 0 !important;width: 100% !important;}
}
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.