Solved

How to Add a Cushion or Margin to the Page Title on Mobile Only

MitchellFly
Excursionist
33 0 5

Hi all!

I'm just curious how we can add some cushion to the h1 page titles on our individual Shopify pages? On desktop, it looks great, but on mobile our page titles are being hidden by the header?

Do y'all have any suggestions on how we can fix this just on the mobile site only?

Accepted Solution (1)
diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@MitchellFly 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > timber.scss.liquid or timber.scss and paste this at the bottom of the file:

@media (max-width: 767px){
    .template-page .page-container{
    padding-top:80px !important;
}
}


You can adjust the value as per your wish. 80px, 70px, 60px, etc.

Please let me know whether it works.

diego_ezfy_0-1613626916160.png

 



Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 6 (6)

diego_ezfy
Shopify Partner
2934 562 883

Hello,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

MitchellFly
Excursionist
33 0 5

Hey Diego,

Thanks for reaching out!

- Store URL: https://footyintl.com

- Example Page URL: https://footyintl.com/pages/suggestions (on mobile)

- Password: none

Thank you for your help!

MitchellFly
Excursionist
33 0 5

Hey Diego,

I was just wondering if there's been any update on this. Do you need more information regarding the issue?

Thank you!

Mitchell

diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@MitchellFly 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > timber.scss.liquid or timber.scss and paste this at the bottom of the file:

@media (max-width: 767px){
    .template-page .page-container{
    padding-top:80px !important;
}
}


You can adjust the value as per your wish. 80px, 70px, 60px, etc.

Please let me know whether it works.

diego_ezfy_0-1613626916160.png

 



Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

MitchellFly
Excursionist
33 0 5

That worked perfectly & in twenty seconds, just as you said! Thanks so much, Diego!

Mitchell

diego_ezfy
Shopify Partner
2934 562 883

I'm glad to hear that!

Next time feel free to contact me personally, I'll be happy to help.

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.