Hey guys, how can I set the search bar in the currency selector in the footer to have a white border, only on MOBILE?
I just want to set the border to white:
Here is link to my store: https://1049xn-ya.myshopify.com/collections/all
I WANT THIS ONLY ON MOBILE.
Thanks a lot,
Tim
Hi @CreatorTim
I understand you’re trying to set the search bar in your currency selector in the footer to have a white border specifically for mobile devices. Here’s exactly how to achieve this:
1. Add Custom CSS to Your Theme
You’ll need to add some custom CSS targeting the mobile version of your store. Here’s how to do it:
- Go to your Shopify Admin panel.
- Navigate to Online Store > Themes.
- In the top right corner, click on the Actions dropdown, then select Edit Code: https://prnt.sc/DVzk-BYGniPf
- Locate your theme.css or theme.scss.liquid file under the Assets folder.
2. Insert the Mobile-Specific CSS- Add the following CSS code to the end of the file:
@media only screen and (max-width: 768px) {
.footer-currency-selector input {
border: 1px solid white; /* Sets the border to white */
}
}
- The @media only screen and (max-width: 768px) ensures this change only applies to mobile devices.
- Replace .footer-currency-selector input with the correct class or ID if this doesn’t work. Use your browser’s developer tools to inspect the element and confirm the class.
3. Preview and Save Changes- Save the file and refresh your store on a mobile device to check if the changes are applied.
- If it doesn’t look right, double-check the element’s class name and ensure no other CSS overrides it.
4. Optional Debugging Tip
If you still have trouble, try using the browser’s developer tools to simulate a mobile view and test the CSS in real time before saving it permanently.
I hope this helps! If you need any other assistance, I am willing to help.
Best regards,
Daisy.