Focal theme - Added code on the bottom of theme.css suddenly stopped working.

Store Design
, ,

Topic summary

A user is experiencing issues with custom CSS code that previously worked but has suddenly stopped functioning on their Shopify store using the Focal theme.

Affected customizations:

  • Removal of padding from product images on product pages (mobile view)
  • Modifications to featured collection displays
  • Disabling the search/tap area in the header

Technical details:

  • The code was added to the bottom of theme.css
  • Some CSS snippets appear corrupted or reversed (text written backwards)
  • The user is seeking guidance on whether they need different code or how to restore the previous appearance

Current status: The issue remains unresolved with no responses yet. The corrupted CSS formatting suggests potential encoding or copy-paste errors that may need correction before troubleshooting the actual functionality.

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

How do I make these changes again to make my site look like it used to. Do I need different codes.

This is to remove padding of the product picture on product page.

@media screen and (max-width: 999px){
.product__media-item {
padding-top: 0px !important;
}

This is to change things on featured collections.

.product-item__info
.product-item-meta {
display: block;
margin-top: -1px !important;
margin-bottom: -5px !important;
margin-right: 0px !important;
margin-left: 0px !important;
text-align: center !important;
}

And this is to disable the search tap area.

a.header__icon-wrapper.tap-area.hidden-pocket.hidden-lap, a.header__icon-wrapper.tap-area.hidden-desk {
display: none !important;
}