Edit Header h2 text and description of "Collection List" & "Featured list" page in Impact Theme

[Dare_to_ask]

I am trying to decrease and center the Header h2 and description text of “Collection List” & “Featured list” element, which uses the Impact template. To achieve this, I need to locate the correct CSS class or ID that targets the header and description text and then add custom CSS or modify it to edit its font height/ px height. How and where do I do that?: theme.liquid, theme.css or local injection?

Web: https://www.artuoso.art/

PW: Artforthewin

[Made4uo-Ribe]

Hi @Dare_to_ask

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 700px){
section#shopify-section-template--21853297082700__collection-list .prose {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 650px;
    margin: auto;
}
section#shopify-section-template--21853297082700__collection-list .section-header {
    display: unset;
    text-align: center;
}
section#shopify-section-template--21853297082700__collection-list section-header.section-header:not(#shopify-section-template--21853297082700__collection-list a.text-with-icon.group) {
     max-width: 100%;
}
section#shopify-section-template--21853297082700__collection-list a.text-with-icon.group {
    justify-content:flex-end;
}
section#shopify-section-template--21853297082700__collection-list span.text-custom, 
#shopify-section-template--21853297082700__featured_collection_wCwpyH .prose h2.h2 {
    font-size: 30px;
}
}

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Dare_to_ask]

Hi @Made4uo-Ribe , Thanks for the solution. The code injection works for the “Explore the World of Art Movements”. But it doesn’t for the next collection list “Not just the big names…”. Am I missing something or is the “Explore the World of Art Movements” / 21853297082700 specific? Is there a way to implement this to all collection lists on the landing page?

Thanks in advance, I appreciate your help!

[Made4uo-Ribe]

Oh, i thought the other same section is good already. replace on the one then.

@media only screen and (min-width: 700px){
.section-stack .prose {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 650px;
    margin: auto;
}
.section-stack .section-header {
    display: unset;
    text-align: center;
}
.section-stack section-header.section-header:not(.section-stack a.text-with-icon.group) {
     max-width: 100%;
}
.section-stack a.text-with-icon.group {
    justify-content:flex-end;
}
.section-stack .prose h2.h2 {
    font-size: 2rem;
}
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Dare_to_ask]

Awesome, that’s exactly how it should look. Thank you for the quick response!

[Made4uo-Ribe]

Welcome, would you mind to hit likes also. Thanks!