How to set the search bar in the currency selector in the footer to white

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.