How to center language preferences

Shopify Discussion
,

Topic summary

A user seeks help centering language preference boxes at the page footer in mobile view only, while applying white font color across all views.

Two CSS solutions proposed:

  1. Transcy’s approach: Create a custom CSS file (Custom-styles.css) in Assets, add styles for .language-preferences with text-align: center and white color, then use a media query @media only screen and (min-width: 768px) to reset alignment for desktop views. Include the CSS file in the theme and save.

  2. PageFly-Richard’s approach: Navigate to section-footer.css in Assets and add a media query @media screen and (max-width: 749px) targeting footer localization elements (.footer__localization h2, .disclosure .localization__form select) to apply white color and center alignment specifically for mobile.

Both solutions use CSS media queries but differ in implementation—one creates a separate file while the other modifies existing footer styles. The discussion remains open with no confirmation of which solution was implemented.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

How do I make to whole language preferences boxes area at the end of the page centered in mobile view ONLY and in a white font in ALL views?

URL: www.taneraskin.com

Best,

Isabelle

2

Hello @isabellemaria ,

We are Transcy - The #1 Translation and Currency Converter.

To make the whole language preferences boxes area at the end of the page centered in mobile view only and in a white font in all views, you can use CSS media queries and apply different styles to the element depending on the screen size. Here’s how:

  • Go to “Online store” → Themes → Actions → Edit Code → Assets
  • Add a new assets and choose “CSS” → name your CSS file (Custom-styles.css) and create
  • Copy and paste this code
.language-preferences {
    text-align: center; /* center the boxes */
    color: #fff; /* set font color to white */
}

@media only screen and (min-width: 768px) {
    /* apply these styles for screens larger than 768px (not mobile view) */
    .language-preferences {
        text-align: left; /* reset text alignment */
    }
}
  • Save and go back to your Themes page → Customize
  • Navigate to the page where the language preferences boxes area is located.
  • Open the “Additional CSS” or “Custom CSS” section (the name may vary depending on your theme) and paste the following code:
@include asset('custom-styles.css');
  • Save and preview.

Hope this can help, contact us if you need any further supports, we’d love to help.

Regards,

Transcy team.

3

Hi @isabellemaria ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:

.footer .disclosure__link {
    color: #fff !important;
}
@media screen and (max-width: 749px) {
    .footer__localization h2,
    .disclosure .localization-form__select {
        margin: 0 !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly