Solved

How to make center align the block in my footer for mobile only

clayinfo
Excursionist
51 0 11

Hi there,

 

I would like to ask help in making this center aligned, but for mobile only. 

www.constructionlayers.com
Password: collectionthree

Screen Shot 2023-12-29 at 5.18.04 AM.png


Accepted Solution (1)

Moeed
Shopify Partner
3531 890 1106

This is an accepted solution.

Hey @clayinfo 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
a.link.link--text.list-menu__item.list-menu__item--link {
    justify-content: center !important;
}
}
</style>

RESULT:

Moeed_0-1704201063038.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
3531 890 1106

This is an accepted solution.

Hey @clayinfo 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
a.link.link--text.list-menu__item.list-menu__item--link {
    justify-content: center !important;
}
}
</style>

RESULT:

Moeed_0-1704201063038.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
clayinfo
Excursionist
51 0 11

Thank you! This worked!

Moeed
Shopify Partner
3531 890 1106

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

websensepro
Shopify Partner
872 117 126

Hi, @clayinfo.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

ul.footer-block__details-content.list-unstyled li a {
    justify-content: center;
}

 

Result:

websensepro_0-1704292976673.png

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
clayinfo
Excursionist
51 0 11

Hello, 

Thank you for the feedback.

I pasted the code at the bottom of base.css and it didn't work. Any reason why?

Made4uo-Ribe
Shopify Partner
5089 1215 1483

Hi @clayinfo 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 749px){
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in a {
    justify-content: center !important;
}
}

 

And save. 

Result:

Made4uoRibe_0-1704210988257.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


clayinfo
Excursionist
51 0 11

Hello, 

I tried pasting the code at the bottom of base.css and it didn't work. 

Made4uo-Ribe
Shopify Partner
5089 1215 1483

Because you have missing } closing bracket on the base.css file.  

Made4uoRibe_0-1704236566157.png

This isthe end of your base.css file missing closing bracket line 3538.

You need to put the closing bracket, the next codes on that lines would not be working. 

And this is the global css file it work all designs in your store. 

Add the bracket like this. 

Made4uoRibe_1-1704236708150.png

The other developer used another file so it works. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
5089 1215 1483

And if you paste the code on the "section-footer.css" it would work. If that file is not missing some signs. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com