Large whitespace on left when i switch language to arabic(RTL) on mobile

Technical Q&A
, ,
1

Large whitespace on left when i switch language to arabic(RTL) on mobile. I added css stylings for RTL layout.

Website: laveira.sa

Password: laveira123

2

This was wrong – it breaks your narrow screen layouts:

{
  min-width: 500px;
  margin-left: -100px;
}

slideshow-component {
  max-width: 70%;
}

You’d also need

@media screen and (max-width: 749px) {
  html[dir="rtl"]  .product-details {
    /* grid-column: 2 / 3; as it is now */
    grid-column: 1 / -1;
  }
}

If you keep this (why?):

html[dir="rtl"] .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left {
  grid-template-columns: 2fr min(40vw, var(--sidebar-width));
}
3

That is to set the product detailed page columns.
Thank you for your response.
Should I change it for mobile using media queries?

4

I can’t tell what was the problem you’re trying to solve, but I wouldn’t do it like this.

5

Can you please tell me what selector was this?

6

In full it looks like this:

#shopify-section-template--18916326146199__main #ProductInformation-template--18916326146199__main {
  min-width: 500px;
  margin-left: -100px;
}

However, section Custom CSS prepends section id selector to the rules inside, so it could be like this:

#ProductInformation-template--18916326146199__main {
  min-width: 500px;
  margin-left: -100px;
}