Re: Sense Theme - Product Info Margin on Mobile View

Sense Theme - Product Info Margin on Mobile View

Gaiar
Shopify Partner
79 2 15

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

 

Gaiar_0-1717056094543.png

 

Gaiar_1-1717056309814.png

 

Stay authentic,
Replies 10 (10)

suyash1
Shopify Partner
9542 1193 1531

@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

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

ZestardTech
Shopify Expert
5625 1025 1354

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Gaiar
Shopify Partner
79 2 15

ZestardTech
Shopify Expert
5625 1025 1354

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;
}

 

ZestardTech_0-1717060320888.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Gaiar
Shopify Partner
79 2 15

Thank you @ZestardTech 

But unfortunately, it didn't work:

 

Gaiar_0-1717060995035.png 

Gaiar_1-1717061045142.png

 

 

Stay authentic,
ZestardTech
Shopify Expert
5625 1025 1354

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;
}

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Gaiar
Shopify Partner
79 2 15

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):

Gaiar_0-1717069046838.png

 

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:

Gaiar_2-1717069206817.png

 

 

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

 

Gaiar_3-1717069240116.png

 

 

I hope this clarifies

Stay authentic,
Gaiar
Shopify Partner
79 2 15

@PageFly-Noah 

Stay authentic,

PageFly-Noah
Shopify Partner
1317 233 268

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Gaiar
Shopify Partner
79 2 15

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

Stay authentic,