Dawn Theme: How to realign the title of a page

Store Design
, , ,
1

All of the header links on my website, https://www.fleshandbloodcards.com point to pages where the title aligns with the left edge of the body text or the section below it. Except on this page, expansions where the title is centred on the multi column section which follows it, see image:

chad0x001_0-1679833378100.png
chad0x001_0-1679833378100.png1807×838 243 KB

How can I make this title align with the left of the multi column section please?

2

@chad0x001

Add the following CSS to the Custom CSS box from your screenshot:

.page-width--narrow{
        max-width: 120rem !important;
    margin: 0 auto;
    padding: 0 1.5rem;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.page-width--narrow > *{

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

diego_ezfy_0-1679835912536.png
diego_ezfy_0-1679835912536.png1620×833 220 KB

diego_ezfy_1-1679835927262.png
diego_ezfy_1-1679835927262.png1532×684 204 KB

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

3

Hi @chad0x001 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
4

Hi Diego. This is almost the correct solution except that the multi column section contents start approx 80px in from the left edge. So the question remains, how can I make the page title align with the multi column contents left edge please?

5

@chad0x001

You can replace the code with the following:

.page-width--narrow{
        max-width: 120rem !important;
    margin: 0 auto;
    padding: 0 1.5rem;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    
}

.page-width--narrow > *{

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

}

.page-width--narrow{
        max-width: 120rem !important;
    margin: 0 auto;
    padding: 0 1.5rem;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    
}

@media (min-width: 750px){
    .page-width--narrow > *{

    margin-left: -20px;
}
}

And adjust the -20px value as per your needs. It can be a negative or positive value.

Kind regards,
Diego

1 Like
6

That’s it Victor! My website is complete thanks to your fantastic help. If you have a buy me a coffee or go fund me page, please reply with it here and I will certainly send you a donation! What a wonderful person you are x