Having a problem updating my preview page after editing the CSS code.

Shopify Discussion

Topic summary

A user working with the Autonic theme is experiencing issues when editing component.search.css to resize the homepage search bar. Core Problem: CSS changes either don’t appear in the preview or show with significant delays.

Attempted modifications include:

  • Search input padding adjustments
  • Width/height changes to .search-header__submit and .header-search
  • Icon sizing modifications
  • Positioning and float properties for .site-header__search

Key observations:

  • Multiple CSS rules marked as producing “No visible changes”
  • Code contains extreme values (e.g., margin-top: 135000px, height: 400000px) suggesting troubleshooting attempts
  • Partial/corrupted CSS at the end with reversed text and incomplete declarations
  • Code syntax appears malformed in places

Status: The issue remains unresolved with no responses yet. The user seeks advice on why preview updates aren’t reflecting their edits properly.

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

Context.

I am currently using the Autonic Theme.
I am working in the component.search.css

I am looking to adjust and resize the search bar on the homepage. With every edit and adjust I make no changes are shown on the preview page. When they are its almost as if there is delay from what I last edited to what gets shown on the page.
Thank you for any help or suggestions in advice.

// Dont know
.search__input.field__input {
  padding-right: 100rem;
}

//No visable Changes 
// OG values W = 1030
// H = 1200
.search-header__submit .header-search {
	 width: 130px;
    height: 100px;
}

// No visable CHanges 
// OG w = 25
//OG h = 25
.icon-header-search {
	width: 25px;
    height: 25px;
    fill: var(--color-base-button-text);
    margin-top: px;
}

.icon-header-search:hover {
    fill: var(--color-base-accent-1);
}

// No visable changes 
// OG value 5
.search__button .icon {
    height: 5rem;
}

//No visable changes
// OG Margin top = 35
OG postion = right
OG width = 5000
OG float = right
.site-header__search {
    margin-top: 135000px;
	position: center;
    width: 2px;
    float: center;
}

//OG float = none
// OG w = auto
//OG position = left
.search-header.search {
	float: none;
	width: auto;
    position: center;
}

//  height: 80px;
    margin: 0;
    padding: 0 100px 0 12px;
    width: 450px;
    float: right;
    letter-spacing: .4px;
    font-size: 12px;
    text-transform: capitalize;

.search-header__input {
	border: 2px solid var(--color-base-accent-1);
    color: #666;
    height: 80000px;
    margin: 0;
    padding: 0 100px 0 12px;
    width: 450px;
    float: center;
    letter-spacing: .4px;
    font-size: 12px;
    text-transform: capitalize;
    font-family: var(--font-body-family);
    border-radius: var(--button-border-radious);
    -webkit-border-radius: var(--button-border-radious);
}

//Search Button 
.search-header__submit {
	border: medium none;
    display: circle;
    height: 400000px;
    width: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    background-color: var(--color-base-accent-1);
    padding: 0 23px;
}
.search-header__submit .icon__fallback-text {
    letter-spacing: 0.6px;
}
.search-header__submit .icon-header-search {
    display: none;
}
/* Remove extra spacing for search inputs in Safari */
input::-webkit-search-decoration {
  -webkit-appearance: none;
}

@media (max-width: 2000px) {
   .site-header__search {
      position: relative;
      margin-left: 30px;
      width: 320px;
      float: left;
      padding: 0;
   }
}
@media (max-width: 749px) {
  .search-header__submit .header-search {
      display: inline-block;
      width: 20px;
      height: 20px;
      vertical-align: middle;
  }
}
@media (max-width: 650px) {
    .site-header__search {
        width: 300px;
    }
}
@media (max-width: 575px) {
  .site-header__search {
      width: 100%;
      margin: 15px 0 15px;
  }
}
@media (max-width: 479px) {
    .template-search .grid__item {
        width: 100%;
    }
   
}