Why did I lose all the effects of my Custom CSS edits?

Store Design
, ,
1

Hi Everyone,

My website is: theoutdoorarmory.com

My theme is: Xtra

I am just wondering when I woke up this morning I checked my website and found out all the effects of the Custom CSS that I inputted were all gone. See below the Custom CSS code that’s in my Custom CSS field:

@media only screen and (max-width: 1000px) {
  #header-outer #nav > ul > li > ul ul li a > .img {
    position: static;
    width: auto !important;
    height: 29px !important;
    margin-top: 0;
  }
  z #root #header-outer #nav > ul > li > ul ul li a .img img {
    margin-left: 0;
    display: block;
    transform: none;
    margin-right: 0;
  }
  #header-outer #nav > ul > li > ul ul li a {
    display: flex;
  }
}
span.input-amount.semantic-input-initialized.input-amount-listening {
  display: none !important;
}
.f8pr .price {
  font-size: 24px;
}
@media only screen and (max-width: 760px) {
  .l4cl.w50-mobile {
    --w2: 33% !important;
  }
}
li.ff-primary a {
  font-size: 15px !important;
}
span.img.category img {
  width: 35px !important;
}

Screenshot 2025-01-12 103233.png
Screenshot 2025-01-12 103233.png2530×1342 391 KB

Did I do anything wrong? Please help.

Outdoor Armory

2

@outdoorarmory - on line 8, what is that z ? is it a class or wrongly typed? please remove it and check

3

Hi @suyash1 , thanks for your reply. I already removed “z” on Line 8. However, the Cusom CSS is still not working. Please see below screenshot as proof:

Screenshot 2025-01-12 110059.png
Screenshot 2025-01-12 110059.png2516×1221 351 KB

4

Hello @outdoorarmory

Here is the corrected and well-formatted version of your CSS:

  1. Removed the unnecessary z in z #root #header-outer… to avoid syntax issues.
  2. Added proper indentation and spacing for better readability.
  3. Ensured consistent formatting across all rules.
@media only screen and (max-width: 1000px) {
  #header-outer #nav > ul > li > ul ul li a > .img {
    position: static;
    width: auto !important;
    height: 29px !important;
    margin-top: 0;
  }
  #root #header-outer #nav > ul > li > ul ul li a .img img {
    margin-left: 0;
    display: block;
    transform: none;
    margin-right: 0;
  }
  #header-outer #nav > ul > li > ul ul li a {
    display: flex;
  }
}
span.input-amount.semantic-input-initialized.input-amount-listening {
  display: none !important;
}
.f8pr .price {
  font-size: 24px;
}
@media only screen and (max-width: 760px) {
  .l4cl.w50-mobile {
    --w2: 33% !important;
  }
}
li.ff-primary a {
  font-size: 15px !important;
}
span.img.category img {
  width: 35px !important;
}
5

@outdoorarmory can you please provide this page link where you are trying to apply this css

6

@suyash1 , the link is https://theoutdoorarmory.com/

7

Hi @devcoders , thanks for your reply with the well-formatted version of my CSS. However, when I copy-pasted the CSS Lines 24 and 25 are still not working. Please see below screenshot:

Screenshot 2025-01-12 110750.png
Screenshot 2025-01-12 110750.png2548×1398 391 KB

8

@outdoorarmory I think custom css do not support media queries and hence it is not working, you will need to add line 24 to 28 to the css file you have, you have screen.css file

9

Hello @outdoorarmory

Go to Online Store, then Theme, and select Edit Code.
Search for assets/screen.css Add the provided code at the end of the file.

@media only screen and (max-width: 1000px) {
#header-outer #nav > ul > li > ul ul li a > .img {
position: static;
width: auto !important;
height: 29px !important;
margin-top: 0;
}
z #root #header-outer #nav > ul > li > ul ul li a .img img {
margin-left: 0;
display: block;
transform: none;
margin-right: 0;
}
#header-outer #nav > ul > li > ul ul li a {
display: flex;
}
}
span.input-amount.semantic-input-initialized.input-amount-listening {
display: none !important;
}
.f8pr .price {
font-size: 24px;
}
@media only screen and (max-width: 760px) {
.l4cl.w50-mobile {
--w2: 33% !important;
}
}
li.ff-primary a {
font-size: 15px !important;
}
span.img.category img {
width: 35px !important;
}

devcoders_0-1736652092225.png
devcoders_0-1736652092225.png490×644 54.4 KB

10

Hi @suyash1 , thanks for your reply. I think I am getting a hint on what needs to be done. Do you mean I need to go to Theme > Customize > Code and then look for screen.css file and then paste Lines 24 to 28? Although please pardon my ineptness as could you kindly instruct me like I am 5 on this one? Where to paste the lines, exactly?

Thank you!

Outdoor Armory

11

@outdoorarmory please add this css to the very end of your screen.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → screen.css