How do I center the text “Country/region” Text above the currency button?
Topic summary
A user seeks help centering the “Country/region” text above a currency selector button in their Shopify theme.
Initial Solutions Provided:
- PageFly-Henry suggested adding CSS code to the
base.cssfile targeting the footer country label withtext-align: centerwithin a media query for screens up to 767px width. - This partially worked but left the currency button itself misaligned on mobile.
Follow-up Solution:
- Moeed provided custom CSS to be added in
theme.liquidabove the</body>tag (specific code appears corrupted in the conversation). - This aligned the element on desktop but the mobile alignment issue persists.
Current Status:
The discussion remains unresolved. The main concern is achieving proper center alignment of both the text label and currency button specifically on mobile devices, while desktop alignment has been addressed.
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
h2#FooterCountryLabel {
text-align: center !important;
}
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
It worked but it looks like the currency button itself is not aligned in the center on mobile so it looks a little bit off.
I don’t mind the way it looks on pc.
Hey @axelsalinas627
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
It looks aligned on pc but my main concern is on mobile. The “country/region” button is still not aligned in the center on mobile view.