style in theme.css is not working

Store Design

Topic summary

A user encountered an issue where CSS code added to theme.css wasn’t working, though the same code functioned correctly when applied directly as inline styles in the collection description.

The CSS code in question:

  • Targets .Ar-Desc elements on mobile screens (max-width: 640px)
  • Sets RTL (right-to-left) direction and background positioning
  • Styles list items with RTL direction and disc markers

Suggested solutions:

  • Check theme.css for syntax errors (missing brackets or signs)
  • Try adding the code to alternative locations:
    • Custom CSS in theme editor
    • theme.liquid file within <style> tags before the </body> tag
  • One responder requested the specific page URL and feature details to provide a more targeted solution

Resolution: The original poster confirmed the issue was resolved, though the specific solution implemented wasn’t detailed.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m trying to add the following code in theme.css, but it is not working

while it is working when added as a style on the collection description directly as a style

Any idea about how to fix this issue?

@media screen and (max-width: 640px) {
.Ar-Desc
{
direction: rtl !important;
background-position: right !important;

}

.Ar-Desc ul li {

direction: rtl !important;
background-position: right !important;
position: static !important;
list-style-type: disc !important;
list-style-position: inside !important;
}
}

1 Like
2

Hi @BM136

Did you check your theme.css if there is no misplace, or misisng bracket or signs?

Did you try to add this one to other files? like custom css on the theme.editor, on the theme-liquid file.

You just add style tag.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
  • And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Hi @BM136

May I ask which feature and page the code you shared earlier was created for? Could you please provide the link to that page and specify the feature in question? This way, we can provide a suitable solution for you.

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

4

Perfect, Thank you