Re: Center disclaimer on copyright footer - CRAFT theme

Solved

Center disclaimer on copyright footer - CRAFT theme

TFN205
Excursionist
37 0 8

Hello,

 

I added a disclaimer to my footer but it is tot he left and i would like to align it in the center. I have tried many align-center codes but had no luck, please advise!

 

<div class="grid__item">
<small class="site-footer__copyright-content">
* Some remote locations do not qualify for free shipping. *
</small>
</div>

TFN205_0-1671635601036.png

 

Accepted Solutions (2)
suyash1
Shopify Partner
9595 1199 1540

This is an accepted solution.

@TFN205 - add this css to the very end of your base.css file and check

.footer .grid__item{margin: 0 auto;}
Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

DavidEKim
Shopify Partner
392 131 193

This is an accepted solution.

@TFN205 

Hi,

I checked your store and found that you used @suyash1 solution and it looks okay.

However, I think you will need to adjust the settings a bit.

Please change the code as below.

 

 

 

@media screen and (min-width: 768px) {
  .footer .grid__item {
    margin: 0 auto;
    white-space: nowrap;
  }
}
@media screen and (max-width: 767px) {
 .footer .grid__item {
    margin-left: 10px;
    white-space: nowrap;
  }
}

 

 

 

 

Please check your current disclaimer in both PC & Mobile.

---------------------------------------------------------------------------------------------

*Revised

While you were make the disclaimer, you were using the grid__item class which will affect other settings. I like to suggest you to change the class name as your own as below.

 

 

      <div class="talesma-consent"> 
        <small class="site-footer__copyright-content"> 
            * Some remote locations do not qualify for free shipping. *
        </small>
      </div>

 

 

And then, add the class settings in CSS file as below.

 

.talesma-consent {
    width: 100%;
    text-align: center;
}

 

 

This will make looking better on both PC & Mobile.

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

Replies 10 (10)

suyash1
Shopify Partner
9595 1199 1540

@TFN205 - can you please share the page link?

Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
TFN205
Excursionist
37 0 8

shop.talesma.com 

thank you!

 

suyash1
Shopify Partner
9595 1199 1540

This is an accepted solution.

@TFN205 - add this css to the very end of your base.css file and check

.footer .grid__item{margin: 0 auto;}
Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
TFN205
Excursionist
37 0 8

Thank you so much!! that worked perfectly

suyash1
Shopify Partner
9595 1199 1540

@TFN205 - welcome

Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
DavidEKim
Shopify Partner
392 131 193

This is an accepted solution.

@TFN205 

Hi,

I checked your store and found that you used @suyash1 solution and it looks okay.

However, I think you will need to adjust the settings a bit.

Please change the code as below.

 

 

 

@media screen and (min-width: 768px) {
  .footer .grid__item {
    margin: 0 auto;
    white-space: nowrap;
  }
}
@media screen and (max-width: 767px) {
 .footer .grid__item {
    margin-left: 10px;
    white-space: nowrap;
  }
}

 

 

 

 

Please check your current disclaimer in both PC & Mobile.

---------------------------------------------------------------------------------------------

*Revised

While you were make the disclaimer, you were using the grid__item class which will affect other settings. I like to suggest you to change the class name as your own as below.

 

 

      <div class="talesma-consent"> 
        <small class="site-footer__copyright-content"> 
            * Some remote locations do not qualify for free shipping. *
        </small>
      </div>

 

 

And then, add the class settings in CSS file as below.

 

.talesma-consent {
    width: 100%;
    text-align: center;
}

 

 

This will make looking better on both PC & Mobile.

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
TFN205
Excursionist
37 0 8

Thank you ! that is a good point, it did look weird in mobile

Now, it looks better but it is cut off at the end

TFN205_0-1671637885108.png

 

how should i proceed?

DavidEKim
Shopify Partner
392 131 193

I revised my answer.

Please use the lower part to make it better.

You may select the solution for both.:)

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
TFN205
Excursionist
37 0 8

Thank you so much! really appreciate your help 🙂

DavidEKim
Shopify Partner
392 131 193

Hi,

If I don't see the structure, I can't tell it will work.

However, please try the code below.

.site-footer__copyright-content {
  width: 100%;
  text-align: center !important;
}

 

If it doesn't work, please let me know the store url (and PW if pw protected).

Hope it works.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner