Re: Page headers to the left (Refresh)

Solved

How can I align all page headers to the left?

Oe23
New Member
16 0 0

Hello, I want the page headers to be on the left, "How to: Offeast" in this case.

The collection page and homepage is correct but not the other pages. How do I solve this?

Screenshot (52).png

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1786 3107

This is an accepted solution.

You can replace above code by: 

{% if template contains 'page' and handle == 'contact' %}
<style>
@media (min-width: 767px){
.page-width--narrow {
    padding-left: 4.5rem;
    max-width: var(--page-width);
}

form#ContactForm {
    width: 72.6rem
}
}
</style>
{% endif %}

 

View solution in original post

Replies 22 (22)

PageFly-Victor
Shopify Partner
7865 1786 3107

Hi @Oe23 , Could you please share your store URL and password (if enabled). So that we can help you. Thank you!

Oe23
New Member
16 0 0

Hello @PageFly-Victor , offeast.com, thank you.

PageFly-Victor
Shopify Partner
7865 1786 3107

Hi @Oe23 ,

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 </body> :

<style>
.page-width.page-width--narrow.section-template--17891934667019__main-padding {
    padding-left: 4.5rem;
    max-width: var(--page-width);
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

Oe23
New Member
16 0 0

Thank you for your answer @PageFly-Victor , but it did not solve the problem, or perhaps I did it wrong? Screenshot (53).pngScreenshot (54).png

PageFly-Victor
Shopify Partner
7865 1786 3107

@Oe23  You should find a </body> tag at bottom, like photo i attached

PageFlyVictor_0-1682973929564.png

 

Oe23
New Member
16 0 0

Perfect, that solved the problem for that page, but not the other pages, like offeast.com/pages/faq

PageFly-Victor
Shopify Partner
7865 1786 3107

You can replace my previous code by the code below:

<style>
.page-width--narrow {
    padding-left: 4.5rem;
    max-width: var(--page-width);
}
</style>
Oe23
New Member
16 0 0

Okay now the pages are all correct, but the Contact form is weird. Screenshot (55).png

Oe23
New Member
16 0 0

I want to keep it to the left, but have the form look normal.

PageFly-Victor
Shopify Partner
7865 1786 3107

You can try replace by this code, it won't affect to form contact :

{% if canonical_url contains 'contact' %}
<style>
.page-width--narrow {
    padding-left: 4.5rem;
    max-width: var(--page-width);
}
</style>
{% endif %}

 

Oe23
New Member
16 0 0

This did the opposite, now only the Contact page is left-aligned

PageFly-Victor
Shopify Partner
7865 1786 3107

Oh sorry about that, You can replace below code first. Then I will provide the code to re-align the contact page

{% if template contains 'page' and handle != 'contact' %}
<style>
.page-width--narrow {
    padding-left: 4.5rem;
    max-width: var(--page-width);
}
</style>
{% endif %}

 

Oe23
New Member
16 0 0

That is great, and if you could provide the code for the Contact page, that would be perfect!

PageFly-Victor
Shopify Partner
7865 1786 3107

Do you want the word "contact" to the left? I think it's pretty good right now

PageFlyVictor_0-1682977483596.png

 

Oe23
New Member
16 0 0

Yes Contact and the form to the left, if possible.

PageFly-Victor
Shopify Partner
7865 1786 3107

You can add this code below:

{% if template contains 'page' and handle == 'contact' %}
<style>
.page-width--narrow {
    padding-left: 4.5rem;
    max-width: var(--page-width);
}

form#ContactForm {
    width: 72.6rem
}
</style>
{% endif %}
Oe23
New Member
16 0 0

That's perfect on desktop, but not on mobile ..

PageFly-Victor
Shopify Partner
7865 1786 3107

This is an accepted solution.

You can replace above code by: 

{% if template contains 'page' and handle == 'contact' %}
<style>
@media (min-width: 767px){
.page-width--narrow {
    padding-left: 4.5rem;
    max-width: var(--page-width);
}

form#ContactForm {
    width: 72.6rem
}
}
</style>
{% endif %}

 

Oe23
New Member
16 0 0

Perfect, could you maybe provide a code to make the other pages like Contact on mobile? 

Oe23
New Member
16 0 0
Oe23
New Member
16 0 0

Sorry, is it possible to change the code so it does not affect the homepage? Because when I put in the code for Typeform, it becomes like this: 

Screenshot (58).png

Oe23
New Member
16 0 0

offeast.com_(iPhone 12 Pro) (1).pngAlso, how come these to heading are aligned different?