I want to center the collection page headings in DAWN theme WITHOUT centering product names

[learningartist]

I want to center the collection page text (the header on collection pages) WITHOUT centering the names / titles of my products. I wanted to know how I could do that or if there is a way? I've already tried to center h1 and it centers both the collection header and the product title. I just want to center the collection header. I've also tried to enter center on the section-main-page.css page and that did not work either. How can I center the product page titles like in IMAGE 1 without changing the product names like in IMAGE 3?

I am adding images of what my issue is below and what I am looking for.

This is the way I want my collection page headings centered: (IMAGE 1)

......This is how it currently looks (IMAGE 2)

However, I want to keep this text aligned to the left for my individual product names, just how it already is. I DO NOT want to center them (IMAGE 3)

My issue is when I try to center the titles like in IMAGE 1 using the h1 in the code, I end up centering the product names that are in IMAGE 3. I only want to center the collection page titles like in IMAGE 1.

[MarinaPetrovic]

Hi @learningartist, please share your url so I can take a look. 🙂 

[learningartist]

Hi, it is not published on my site as I stated above, so giving a url would not be helpful at the moment, that is why i added screenshots of the issue

[learningartist · Accepted solution]

Hi everyone! This is a solution I found that centers PAGE / COLLECTION page headings and NOT product headings.

1. Go to edit code

2. Go to the 'assets' folder

3. Find the 'component-collection-hero.css' folder

4. Click 'Control' and 'F' on your keyboard at the same time

5. When a search box comes up, type collection-hero__title (copy and paste the words for accuracy) (if the search box doesn't come up for you, just scroll until you find the line in the next step. I added the line number to help when searching for it)

6. Find the line that says '.collection-hero___title' (for me it was around line 39)

7. Make sure it looks like the following / change it as needed to make it look like this pic below

8. Click 'Save' to save the code

9. It should be good to go!

[shawnweigman]

Thank you for your help!  This worked perfectly!

[shawnweigman]

Also, can you help with widening the home page text and heading?  It's looking a little lost.  Although I have the text set for full width, it's not as wide as the products below it.  Thank you!

[learningartist]

Glad the solution to centering page headers worked for you! I'm not exactly sure about if this is what you're looking for, but I'll write some steps below with a picture that could help.  

Tip: Sometimes it helps to make a copy of your website before making changes just in case you save something you don't like

Changing Font Sizes On Theme Editor

1. Open the theme editor for your website

2. Open the Theme Settings on the website editor

3. Find the option called Typography.

4. Below that you can change the font and font sizes. Find the font area you want to change

5. Find the Font Size Scale option below the section you want to change

6. Drag the button under the Font Size Scale text to increase or decrease the size of your text 

7. Save the theme like normal to make sure your changes don't go away