Footer section text issue (Shopify Savor theme)

Store Design
, , , ,
1

Hello Everyone!

I have made the text of the footer section smaller in mobile mode through coding. But when I reduce the text size I see some problem. I want to fix the alignment of the text. I have added the code below.

Store: https://svelteclothes.myshopify.com/

password: Admin

9
9475×610 27.3 KB

/* Footer Mobile Optimization - Final Refined Version */

@media screen and (max-width: 749px) {

/* 1. Center Email Placeholder & Text perfectly */

.email-signup__input {

height: 44px !important;

padding: 0 15px !important;

font-size: 13px !important;

display: flex !important;

align-items: center !important; /\* Vertical center \*/

line-height: normal !important; /\* Resets theme baseline \*/

}

/* 2. Shrink Compliance Text (By subscribing…) */

.footer-content rte-formatter p,

.email-signup-block + rte-formatter p {

font-size: 11px !important;

line-height: 1.3 !important;

margin-top: 8px !important;

opacity: 0.9;

}

/* 3. Small Uniform Text (Terms, Copyright, Submenus) */

.policy-list-trigger,

.footer-utilities__group-copyright,

.footer-utilities__text,

.menu__item a,

.dropdown-localization__button {

font-size: 10px !important;

text-transform: uppercase !important;

}

/* 4. Global Spacing & Logo */

.footer-content {

--footer-gap: 12px !important;

padding-top: 15px !important;

}

.footer-content .logo-block {

--logo-width-mobile: 45% !important;

}

/* 5. Headings */

.menu__heading,

.email-signup__heading {

font-size: 18px !important;

margin-bottom: 5px !important;

}

}

2

Dear @dreamtechzone_5

I’m not sure exactly what problems you’re trying to solve with all the code. However, this is a possible solution to address the issue you mentioned.

  1. remove the code

    image
    image1875×1025 365 KB

  2. Add new code

.email-signup__input-group {
     align-items: center !important;
}

image
image724×966 111 KB

Regards,
Eric from Shopplaza

3

Please add this code to theme.liquid file

<style>
@media (max-width: 749px) {
.email-signup__input-group {
    align-items: center;
}
.footer-content rte-formatter p {
    margin-top: 0px !important;
}
}
</style>