Hello!
I am not liking that the search icon on my mobile view is so close to the logo.
How can I move the search icon more to the right so there is a bigger gap between the icon and logo?
Website URL: https://552324-2.myshopify.com/
password: thalyo
Topic summary
A user seeks to increase the spacing between their mobile site’s search icon and logo, as they currently appear too close together.
Two CSS solutions were provided:
-
JavaScript/CSS injection method (Moeed):
- Navigate to Online Store → Edit Code → theme.liquid
- Add custom
<style>block above the</body>tag - Targets the header icons with specific padding/margin adjustments
-
Direct CSS edit method (Made4uo-Ribe):
- Access Shopify admin → Online Store → Themes → Edit code
- Locate base.css, style.css, or theme.css in the Assets folder
- Add media query targeting mobile view (max-width: 749px)
- Apply
padding-right: 0pxandmargin-right: -15pxto.header__icons
Both approaches use CSS to adjust spacing on mobile viewports. The discussion remains open with no confirmation of which solution was implemented or whether the issue was resolved.
1 Like
Hey @LTirisana
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @LTirisana
Check this one.
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 “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.header__icons {
padding-right: 0px !important;
margin-right: -15px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!