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

[CreatorTim]

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

[DaisyVo · Accepted solution]

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.