Center disclaimer on copyright footer - CRAFT theme

[TFN205]

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>

[suyash1 · Accepted solution]

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

.footer .grid__item{margin: 0 auto;}

[suyash1]

@TFN205 - can you please share the page link?

[TFN205]

shop.talesma.com 

thank you!

[suyash1 · Accepted solution]

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

.footer .grid__item{margin: 0 auto;}

[TFN205]

Thank you so much!! that worked perfectly

[suyash1]

@TFN205 - welcome

[DavidEKim · 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.

[TFN205]

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

how should i proceed?

[DavidEKim]

I revised my answer.

Please use the lower part to make it better.

You may select the solution for both.:)

Thanks.

[TFN205]

Thank you so much! really appreciate your help 🙂

[DavidEKim]

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.