Right Black Border on Mobile [ Narrative Theme ]

Solved
mirrormirror
New Member
3 0 2

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
Shopify Partner
15721 1753 5785

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
suyash1
Shopify Partner
2484 264 398

@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 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes

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

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes