FROM CACHE - de_header

Center Heading - Featured Collection and Collection List

Gelöst
Modico
Forscher
49 3 12

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)

4af32915-5628-4769-9342-60a0da9b67b6.jpg

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

 

20d8da46-145f-42db-abee-a70b57c1a5b0.jpg

 

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)

6678bb95-342b-4079-b490-387d1bb527d4.jpg

 

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

Thanks!

 

2 AKZEPTIERTE LÖSUNGEN
Modico
Forscher
49 3 12

Erfolg.

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

Lösung in ursprünglichem Beitrag anzeigen

Modico
Forscher
49 3 12

Erfolg.

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

Lösung in ursprünglichem Beitrag anzeigen

12 ANTWORTEN 12
Gabe
Shopify Staff
Shopify Staff
14477 2278 3461

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! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Modico
Forscher
49 3 12

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
Shopify Partner
50 6 17

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:

soenmez_0-1683668665991.png

 

Kenan Sönmez | CTO @ Klondev Automation GmbH
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- https://klon.dev/

Gabe
Shopify Staff
Shopify Staff
14477 2278 3461

@Modico 

 

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

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Modico
Forscher
49 3 12

@Gabe 

Ah Oke

Danke

Modico
Forscher
49 3 12

@soenmez 

Thank you!

Modico
Forscher
49 3 12

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
Shopify Staff
Shopify Staff
14477 2278 3461

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,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Modico
Forscher
49 3 12

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
Forscher
49 3 12

There's a little mistake.

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

IT'S IN THE ASSETS FOLDER.

Sorry 

Modico
Forscher
49 3 12

Erfolg.

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
Forscher
49 3 12

Erfolg.

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