Solved

DAWN - Center the Collection Name and Description on Collection Page

optionsclinic
Tourist
12 0 4

Hey there!

 

I found code that centered the collection description, but I need to center the collection name as well. Can anyone tell me how to do this?

 

See example below - TERRAIN is positioned left, but I want it to be centered:

Screenshot 2022-03-04 165723.png

 

Accepted Solutions (2)
oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@optionsclinic ,

.collection-hero__text-wrapper {
    text-align: center;
}
.collection-hero__description.rte {
    max-width: 100%;
}

 

 

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

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

View solution in original post

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@optionsclinic ,

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

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

View solution in original post

Replies 8 (8)

oscprofessional
Shopify Partner
15905 2378 3087

@optionsclinic ,

Share Store URL

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
optionsclinic
Tourist
12 0 4

Hi there, here is my store - https://shop.optionsnaturopathic.com/

 

I would like the Collection Name and Description to be centered. Right now it is all to the left and I can only find code to center the description, not the name too. https://shop.optionsnaturopathic.com/collections/terrain

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@optionsclinic ,

.collection-hero__text-wrapper {
    text-align: center;
}
.collection-hero__description.rte {
    max-width: 100%;
}

 

 

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

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
optionsclinic
Tourist
12 0 4

Thank you so much! I appreciate that easy solution.

 

Would you happen to know how to increase the font size for the header navigation? The links I have are a little too small as is.

oscprofessional
Shopify Partner
15905 2378 3087

@optionsclinic ,

.header__menu-item span {
    font-size: 17px;
}
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
optionsclinic
Tourist
12 0 4

Thank you!  Where should I enter this code?

 

.header__menu-item span {
font-size: 40px;
}

oscprofessional
Shopify Partner
15905 2378 3087

This is an accepted solution.

@optionsclinic ,

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

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
optionsclinic
Tourist
12 0 4

Thank you so much - works great!