Shopify Dawn Theme Mobile Alignment Issue (Currency & Language Selector)

Store Design
, , , ,
1

Hello everyone!

I am using the Shopify Dawn theme. I have added the currency and language selectors on the same line in the footer section for mobile view using custom code. Everything is working fine, but I’m experiencing a spacing issue — there is too much space on the left side of the currency selector and too little space on the right side of the language selector.

I would like to have equal spacing on both sides for better alignment.

I would really appreciate your help.
Thank you in advance!

Store: Svelteclothes

Password: Admin

3
3792×960 38.6 KB

2

Hey @dreamtechzone_5

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.footer__column.footer__localization.isolate {
    padding-left: 0 !important;
}
button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large {
    margin-left: 4px !important;
}
}
</style>

RESULT:

image
image375×349 5.01 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hi @dreamtechzone_5

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:

@media screen and (max-width: 767px) {
.footer__column.footer__localization.isolate {
padding-left: 0 !important;
padding-right: 0 !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer__column.footer__localization.isolate localization-form {
flex: 1;
display: flex;
justify-content: center;
}
button.disclosure__button.localization-form__select.localization-selector.link.link–text.caption-large {
margin-left: 0 !important;
width: auto;
}
}

image
image271×255 10.6 KB

4

Thank you so much. It worked.