Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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 %}
Hi @Oe23 , Could you please share your store URL and password (if enabled). So that we can help you. Thank you!
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
Thank you for your answer @PageFly-Victor , but it did not solve the problem, or perhaps I did it wrong?
Perfect, that solved the problem for that page, but not the other pages, like offeast.com/pages/faq
You can replace my previous code by the code below:
<style>
.page-width--narrow {
padding-left: 4.5rem;
max-width: var(--page-width);
}
</style>
Okay now the pages are all correct, but the Contact form is weird.
I want to keep it to the left, but have the form look normal.
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 %}
This did the opposite, now only the Contact page is left-aligned
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 %}
That is great, and if you could provide the code for the Contact page, that would be perfect!
Do you want the word "contact" to the left? I think it's pretty good right now
Yes Contact and the form to the left, if possible.
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 %}
That's perfect on desktop, but not on mobile ..
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 %}
Perfect, could you maybe provide a code to make the other pages like Contact on mobile?
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:
Also, how come these to heading are aligned different?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024