Solved

Footer Spacing and Alignment (Refresh Theme)

crystalbk
Tourist
6 0 1

Can someone please help me center the social media icon in its block (this social media is in a brand information block not the check marked show social icons in the footer) on desktop and mobile? You can see in the pictures where I want it.

 

I would also like to reduce the spacing on the mobile footer. I was able to reduce the spacing on the desktop footer from code in another post I found, but the mobile footer spacing is still excessive. Below is all the code I have in the Custom CSS area for the Footer:

 

{
  text-align: center;
}
.footer__content-bottom.scroll-trigger.animate--slide-in {
  padding-top: 0px !important;
}
.footer__content-top {
  padding-bottom: 2rem !important;
}

Screenshot 2023-12-28 120540.jpgFooter.jpg

 

My website is ff804e-2.myshopify.com. Password is aubowb.

Accepted Solutions (2)

techlyser_web
Shopify Partner
1095 210 223

This is an accepted solution.

Hello @crystalbk 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

   .footer-block__brand-info .footer__list-social.list-social {
      justify-content: center !important;
    }

</style>

 

Desktop:

techlyser_web_0-1703786845019.png

Mobile

techlyser_web_1-1703786904113.png

 

 

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

techlyser_web
Shopify Partner
1095 210 223

This is an accepted solution.

Hello @crystalbk 
I did mistake in write, sorry for that

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

    @media screen and (max-width:767px){
       .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
           margin-bottom: 0 !important;
       }
      #shopify-section-sections--21880748736826__footer .footer__content-top {
                padding-bottom: unset !important;
      }
      .footer-block.grid__item {
            margin: 1rem 0;
       }
       .footer-block__details-content {
              margin-bottom: 1rem;
       }
       .footer__content-bottom-wrapper.page-width {
              display: none;
       }
  }

</style>

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 6 (6)

techlyser_web
Shopify Partner
1095 210 223

This is an accepted solution.

Hello @crystalbk 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

   .footer-block__brand-info .footer__list-social.list-social {
      justify-content: center !important;
    }

</style>

 

Desktop:

techlyser_web_0-1703786845019.png

Mobile

techlyser_web_1-1703786904113.png

 

 

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
crystalbk
Tourist
6 0 1

Thanks! That centered the Facebook icon. Do you happen to know how to reduce the spacing in the circled areas, so the icon and text blocks are closer together?

 

Screenshot 2023-12-28 141706.jpg

techlyser_web
Shopify Partner
1095 210 223

Hello @crystalbk 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

    @media screen and (ma-width:767px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
margin-bottom: 0 !important;
}
#shopify-section-sections--21880748736826__footer .footer__content-top {
padding-bottom: unset !important;
}
.footer-block.grid__item {
margin: 1rem 0;
}
.footer-block__details-content {
margin-bottom: 1rem;
}
.footer__content-bottom-wrapper.page-width {
display: none;
}
}

</style>

 

techlyser_web_1-1703836754299.png

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
crystalbk
Tourist
6 0 1

Hello @techlyser_web 

This isn't working for me. Below is how I pasted the code in the theme.liquid file and what the mobile view looks like after saving it. Do you know what I'm doing wrong? I'm not a code expert by any means.

Screenshot 2024-01-02 074228.jpg

Screenshot 2024-01-02 074249.jpg

techlyser_web
Shopify Partner
1095 210 223

This is an accepted solution.

Hello @crystalbk 
I did mistake in write, sorry for that

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

    @media screen and (max-width:767px){
       .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
           margin-bottom: 0 !important;
       }
      #shopify-section-sections--21880748736826__footer .footer__content-top {
                padding-bottom: unset !important;
      }
      .footer-block.grid__item {
            margin: 1rem 0;
       }
       .footer-block__details-content {
              margin-bottom: 1rem;
       }
       .footer__content-bottom-wrapper.page-width {
              display: none;
       }
  }

</style>

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
crystalbk
Tourist
6 0 1

Thank you @techlyser_web! That worked. Thanks again for all your help!