Hello,
I have an issue with my website.
I’m having alignment problems with my search bar on mobile. On some cell phones it sticks out of the screen, and the “close” option is a little hidden. How do I fix this?
Topic summary
A user is experiencing mobile search bar alignment issues on their Shopify store (tudoconexao.com). The search bar extends beyond the screen on some devices, and the close button text appears partially hidden or cut off.
Solutions Provided:
- thirtycoders suggested adding CSS code to
base.csstargeting screens under 550px width, adjusting visibility and margins - PageFly-Oliver recommended inserting code into
theme.liquidfile
Current Status:
The initial alignment problem has been resolved using one of the suggested solutions. However, a secondary issue persists: the close button should display “fechar” (Portuguese for “close”) but the full word doesn’t appear correctly. The user confirmed this remaining bug with a screenshot showing the truncated text.
Hi @Dawenn ,
Simply follow these steps:
Navigate to Online Store → Theme → Edit code.
Search for the file “base.css.”
Paste the provided code at the bottom of the file.
Save your changes.
@media screen and (max-width: 550px)
.header__search-bar-wrapper.is-visible {
visibility: visible;
margin-bottom: -59px;
margin-left: -15px;
}
.search-bar__input {
height: 100%;
width: 100%;
padding: 0 0px 1px 12px !important;
border: solid 1px var(--bordamenu);
line-height: normal;
color: var(--heading-color);
-webkit-appearance: none;
border-radius: 10px 0 0 10px;
border-right: 0;
}
}
Thank you
1 Like
Hi @Dawenn ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
1 Like
