Solved

How do I center align all headings on my website?

hitesh469
Tourist
8 0 5

Hi, Thank you for your help in advance

I want to center align all headings on the website. I referred to earlier posts on the forum and found a code to be used in the base.css: 

.title-wrapper, .collection__title, .title, .collage-wrapper-title {
text-align: center!important;
}

I have used the above code. It did center align most of the headings except for 2: Collection list title & multi column title. The multi column title was center aligned on the phone but in desktop it is still aligned to the left. I am unable to upload photos here for reference as it keeps saying format not supported here 

 

Store URL: https://gomyld.com/
password: hiwawa

Please help as soon as possible. It is an urgent requirement. 

Accepted Solution (1)

ZestardTech
Shopify Expert
5483 986 1311

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset -> base.css and paste this at the Bottom of the file:

 

.title-wrapper-with-link {
    justify-content: center;
}

 

ZestardTech_0-1685006886219.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 7 (7)

PageFly-Oliver
Astronaut
878 190 171

Hi @Hitesh469,

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file basecss

Step 3: Paste the below code at the bottom of the file -> Save

h1,h2,h3,h4,h5,h6{
text-align:center !important
}



Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

hitesh469
Tourist
8 0 5

Hi thank you for the reply. Unfortunately it is not working. The code has merely changed the alignment of the heading used in the image section of the home page. everything else remained the same. 

Instead of a common code for all headings, is it possible to give a code for these two section headings alone specifically: 

Multicolumn section heading &

Collection list heading

Do let me know, thank you. 

PageFly-Oliver
Astronaut
878 190 171

You can try a gain

h1,h2,h3,h4,h5,h6{
text-align:center !important;
margin-left:auto !important;
margin-right:auto !important;

}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

oscprofessional
Shopify Partner
15897 2378 3084

Hello @hitesh469 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
    text-align: center !important;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
sahrar
Visitor
2 0 0

this was the first one to work for me, thanks

sahrar
Visitor
2 0 0

how do i not centre the heading in the footer though?

ZestardTech
Shopify Expert
5483 986 1311

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset -> base.css and paste this at the Bottom of the file:

 

.title-wrapper-with-link {
    justify-content: center;
}

 

ZestardTech_0-1685006886219.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing