Solved

How to center header of featured collections on detskop and mobile? RIDE THEME

atm19
Excursionist
41 0 3

Hi, can someone help me to center the headers of these featured collections on the homepage for the detskop and mobile version? Thanks

 

www.taneau.com

 

IMG_8463.png

IMG_8464.png

Accepted Solution (1)

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @atm19 ,

Please add the below mentioned code at the bottom of the theme.liquid file before </body> tag and save for the desired output in  mobile version.

<style>

@media screen and (max-width: 720px){
h2.title.inline-richtext.h2.scroll-trigger.animate--slide-in {
text-align: center;
}
}

</style>

Output -:

Anshul_arora_0-1709812625740.png


I hope this helps.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 12 (12)

prakashVt
Shopify Partner
97 9 16

Hello @atm19 
Add this CSS code to your css file 

.collection__title h2 {
    text-align: center;
}

Let me know if you need any more help. 

- Did you find my response useful? Mark it as "Accepted solution"; so others can see it, or just like it.
- VTN Power Wishlist Looking for a Wishlist App for your store? Check this app with the free plan available.
- Feel free to Contact me
atm19
Excursionist
41 0 3

Thanks! but it works only for detskop version i need it also on mobile.

prakashVt
Shopify Partner
97 9 16

Try to add important like this 

prakashVt_0-1709809259527.png

 

- Did you find my response useful? Mark it as "Accepted solution"; so others can see it, or just like it.
- VTN Power Wishlist Looking for a Wishlist App for your store? Check this app with the free plan available.
- Feel free to Contact me
prakashVt
Shopify Partner
97 9 16

@atm19 
I can see the text center css but it is applied on hover 

prakashVt_0-1709809952894.png

 

Add the CSS directly at the bottom of your base.css file 
If you need help do let me know. 

 

- Did you find my response useful? Mark it as "Accepted solution"; so others can see it, or just like it.
- VTN Power Wishlist Looking for a Wishlist App for your store? Check this app with the free plan available.
- Feel free to Contact me

sahilsharma9515
Shopify Partner
985 123 185

Hi @atm19 Please add the code in your theme.css/base.css/style.css file which is available in your theme.

 

.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
    text-align: center !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1709809015110.png

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


atm19
Excursionist
41 0 3

Thank you, but it works only for detskop i need it also on the mobile version.

sahilsharma9515
Shopify Partner
985 123 185

Hi @atm19 Please add !important and it will work well.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


atm19
Excursionist
41 0 3
  • there is already important and doesnt work:(
atm19
Excursionist
41 0 3

on the MOBILE version

sahilsharma9515
Shopify Partner
985 123 185

Hi @atm19 Try to use this code.

 

.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down>h2 {
    text-align: center !important;
}

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


atm19
Excursionist
41 0 3

it works thanks. But again not on the mobile version. What should i try other?

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @atm19 ,

Please add the below mentioned code at the bottom of the theme.liquid file before </body> tag and save for the desired output in  mobile version.

<style>

@media screen and (max-width: 720px){
h2.title.inline-richtext.h2.scroll-trigger.animate--slide-in {
text-align: center;
}
}

</style>

Output -:

Anshul_arora_0-1709812625740.png


I hope this helps.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here