How can I center footer content on a mobile screen?

Store Design
1

I placed the trust icon file in the social links and logo container. But they have shifted to the left on the mobile phone screen. Help center it so they are as centered as the payment company icons. Theme Motion. Thank you.

20230521_184741.jpg
20230521_184741.jpg3000×4000 2.11 MB

Screenshot_20230521_184329_Chrome.jpg
Screenshot_20230521_184329_Chrome.jpg1080×2400 115 KB

1 Like
2

Hello,

Please provide your store link with the icons to give you the exact css.

3

sklema.com Mobile version of the site

4

Hello @Igor11

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file → add this following code at the bottom of page

@media (max-width: 767px) {
  .trust-icon-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }
}

Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

5

Hi, @Igor11

Greetings from the Store Watchers Support Team! Happy to help you today.

  1. Go to online store > theme > edit code > assets > theme.scss(file) and Paste the below code at the bottom of the file → Save
@media only screen and (max-width: 589px){
.grid__item.medium-up--hide .footer__logo-social{
  padding: 20px 20px 20px 24px !important;
  }
}

After applying the above CSS code , it will show like the following screenshot:

Screenshot_2.png
Screenshot_2.png258×482 14.8 KB

Let me know If need further assistance

Regards,

Store Watchers Support Team

6

You can do that by adding this CSS code at the bottom of theme.scss.liquid file

@media only screen and (max-width: 589px) {
.footer__logo-social {
justify-content: center;
}
.footer__logo-social .footer__social {
display: none !important;
}
}

Screenshot 2023-05-22 at 14.10.23.png
Screenshot 2023-05-22 at 14.10.23.png391×749 24.2 KB

7

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset → theme.scss.css and paste this at the bottom of the file:
@media only screen and (max-width: 768px){
.grid__item.medium-up--hide {
  display: flex;
  justify-content: center;
}

.footer__logo {
  display: flex;
  justify-content: center;
}

.footer__logo a {
  height: 120px;
}

.footer__logo img {
  display: block;
  margin: auto; /* Center the image horizontally */
}
}

ZestardTech_0-1684740037636.png
ZestardTech_0-1684740037636.png597×837 93.2 KB

8

Thank you. I checked both codes that I put in theme.scss.liquid

It works.

9

I don’t have base.css
Thanks for the help.

10

this code variant works for me too. Thank you.

1 Like
11

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

1 Like
12

Your help has been very valuable to me. Your solution worked great for me.