Sense Theme - Product Info Margin on Mobile View

[Gaiar]

Dear Support Community,

I used the below code to add some right margin to the product info container only when switching to RTL.

It is working on desktop, however, it affected the mobile view as well.

I need to mobile view to remain centered (no margin).

Is there a problem with my code?

Thank you.

https://nefertari-eg.myshopify.com/

Password: ohldah

[suyash1]

@Gaiar - your css looks ok, this can happen due to other css, inspect element and check what css is adding that space on mobile view

[ZestardTech]

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[Gaiar]

@ZestardTech 

https://nefertari-eg.myshopify.com/

ohldah

[ZestardTech]

Hi @Gaiar 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.gradient {
padding-top: 0;
}

[Gaiar]

Thank you @ZestardTech 

But unfortunately, it didn't work:

 

[ZestardTech]

Hi @Gaiar 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the Top of the file:

.gradient {
padding-top: 0!important;
}

[Gaiar]

Thanks again @ZestardTech 

Unfortunately, it didn't work.

Please let me explain the issue in details:

That's how the product page looked on desktop when switching to RTL (Arabic):

I added this code to the theme.liquid file to add space between the photo and the text when switching to RTL:
@media screen and (min-width: 750px){
.product__info-container {
margin-right: 20px !important;
}
}

That code worked on desktop (added space between the photo and the text), and added space as well on the mobile version which made the photo looks like it is aligned to the right.

This is the English version I am trying to reach:

And this is the Arabic (RTL) version that i need to fix:

I hope this clarifies

[Gaiar]

@PageFly-Noah 

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @Gaiar Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
@media screen and (max-width: 767px){
.product .product__media-item{
  width: 100%;
}
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[Gaiar]

Thank you @PageFly-Noah 

I made the image fill the screen, and when I tried 80% there was still a margin. Moreover, it affected the English version ( added extra margin).