Correct Icon Spacing on Mobile View

Store Design
, , ,

Topic summary

A user requested CSS code to reduce spacing between the search bar and shopping bag icon in mobile view on the Dawn theme.

Solution provided:

  • Add specific CSS to the end of the base.css file
  • The code targets .header__icon--search with a max-width media query at 749px
  • Access via: Shopify Admin → Online Store → Themes → Edit code → base.css

Status: Resolved - the user confirmed the solution worked perfectly.

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

Hello!

Please assist with a code move the search bar closer to the shopping bag. This is the view on mobile.

Dawn theme

RIGHTEOUS OFFICIAL

Screenshot 2024-10-30 200827.png
Screenshot 2024-10-30 200827.png569×131 7.45 KB

2

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

@media screen and (max-width:749px){
.header__icon--search{width: 1.4rem;}
}
1 Like
3

This is perfect!

Thank you!