Center Heading - Featured Collection and Collection List

[Modico]

Hello everyone

I have 2 Questions.

1. How can I center the Heading of a Featured Collection on Mobile. In picture 1 (Desktop) you can see that the Heading is centered, but in Picture 2 (Mobile) the Heading isnt centered so could anyone tell me how i can center this too.

Picture 1 (Desktop view of a Featured Collection) (Heading is centered)

 Picture 2 (Mobile View of a Featured Collection) (Heading is NOT centered)

2. How can I center the Heading of a Collection List on Desktop and Mobile. I only show you a picture of Desktop (Picture 3) but on mobile its also not centered. So could please tell me somebody how i can center the Heading of a Collection List on Desktop and Mobile.

Picture 3 (Desktop View of a Collection List) (Heading is NOT centered)

It would realy help me out if somebody could help me with these 2 problemes.

Thanks!

[Modico · Accepted solution]

Hello everyone 

I just found the soulution to the second question in my Post. So if anyone wants to center the Heading of Collection List for Mobile and Desktop then here's the code:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Assets folder, open the base.css
3. Paste the code below at the very bottom of the file.

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

I hope this helps some people out.

Modico

[Gabe]

Hey @Modico 

Thanks for the Images and you have reached the German community here but we can chat in English too! 😉

As your requests will require a deep-dive into your theme code, your best next move is to contact a programmer that can code that into your assets files as well as into your css files for you. I hope you can understand that because we have no access to your admin and theme code, and because every theme code and theme is different, commissioning a programmer is your best bet at this stage!

I believe that Kenan @soenmez responded in your parallel thread too but you haven't acknowledged his response yet. He would be a good programmer to commision for all the theme code changes that you want. Please also note that changes to your theme code can 1) negatively impact page loading speeds and also 2) exclude your theme from future theme updates.

You will also find a priceworthy programmer on fiverr.com or in our private FB Gruppe here if you post your question there too in German. A coder will respond you can send them a collaborator account access to your store admin.

Hope that helps! 😉

[Modico]

Hey @Gabe 

Thanks for your response.

I going to ask @soenmez after he helped me with my other probleme.

Can you tell me how I can change to the english community or what should I do?

And do you know how I can write code in this box with colors like other people do, so that it looks clean and that there's also a botton where you can copy it.

That would realy help me out.

Thanks!

[soenmez]

Hey @Modico 

I have answered you on your other post.

Here is the Link of the English Community Forum:
https://community.shopify.com/c/shopify-community/ct-p/en?profile.language=en 

Also, to insert Code-Blocks in Threads or answers, you can extend the toolbar of the Message-Editor and select the appropriate option:

[Gabe]

@Modico 

Do you speak German? Wir sind hier in der deutschen Community und du kannst auch auf Deutsch posten falls das einfacher ist. 😉

[Modico]

@Gabe 

Ah Oke

Danke

[Modico]

@soenmez 

Thank you!

[Modico]

Hey @soenmez 

Could you please help me with the problems in this post. Gabe said you are a very good coder so I think you could help me. 

Please tell me if you need any code for it.

Modico

[Gabe]

Hey @Modico 

@soenmez can definitely help you. Please don't forget that our Shopify partners offer a service to our merchants that requires a lot of work and costs, involving a deep-dive into your theme code and then programming a solution that works for you. As a result they can discuss a price with you that suits your budget.

Best,

[Modico]

Hello everyone

I found out by my self while trying around how to center the Heading of a Featured Collection on mobile. So if anyone needs the code here it is:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snippets folder, open the template.collection.css
3. Paste the code below at the very bottom of the file.

.collection__title {
  text-align: center;
}

I hope that helps some people out!

Modico

[Modico]

There's a little mistake.

template.collection.css is not in the Snippets folder.

IT'S IN THE ASSETS FOLDER.

Sorry 

[Modico · Accepted solution]

Hello everyone 

I just found the soulution to the second question in my Post. So if anyone wants to center the Heading of Collection List for Mobile and Desktop then here's the code:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Assets folder, open the base.css
3. Paste the code below at the very bottom of the file.

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

I hope this helps some people out.

Modico

[Modico · Accepted solution]

Hello everyone

I found out while trying around how to center the Heading of a Featured Collection on mobile ,(the code should also work for desktop but I'm not a 100% sure but you can try it out and send my a Feedback). So if anyone needs the code here it is:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Assets folder, open the template-collection.css
3. Paste the code below at the very bottom of the file.

.collection__title {
  text-align: center;
}

I hope that helps some people out!

Modico