Solved

Why are the tops of my Shopify pages getting cut off?

karmadesign
Excursionist
30 0 5

Hi there,

The tops of my shopify pages are getting cut off. It only happens on the pages shopify creates (login, collections) and not the ones I created with Gempages (landing pages, products, homepage). How do I fix this?

 

elevatedkarma.com

pw: chifri

 

Thanks for taking a look!

 

See social logins:

karmadesign_0-1637511565830.png

 

See header "Search Results" on mobile collection pages (https://elevatedkarma.com/pages/search-results-page?collection=mens-clothes😞

IMG_5037.jpg

 

 

 

Accepted Solution (1)
GemPages
Shopify Partner
5588 1261 1203

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 750px) {
.main-content {
    padding-top: 175px;
}
}

@media only screen and (max-width: 749px) { body:not(.gempage) .main-content { padding-top: 70px; } }

Hi @karmadesign we could add this CSS code above to fix the mobile screen side.

 

please try it and let us know if it works

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
36839 3635 11972

@karmadesign 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px) {
.main-content {
    padding-top: 175px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
karmadesign
Excursionist
30 0 5

Hi @KetanKumar—thanks for your suggestion!

 

This fixed the issue on my dsktop site, but I still have the issue on laptop, tablet and mobile. Any thoughts for these?

 

Logan

GemPages
Shopify Partner
5588 1261 1203

This is an accepted solution.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 750px) {
.main-content {
    padding-top: 175px;
}
}

@media only screen and (max-width: 749px) { body:not(.gempage) .main-content { padding-top: 70px; } }

Hi @karmadesign we could add this CSS code above to fix the mobile screen side.

 

please try it and let us know if it works

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
karmadesign
Excursionist
30 0 5

Thanks very much! This fixed all issues 🙂

karmadesign
Excursionist
30 0 5

Hi @GemPages,

 

This issue has resurfaced on my mobile pages, specifically the login page. Despite having the mobile code included.

 

Please take a look:

elevatedkarma.com

chifri

GemPages
Shopify Partner
5588 1261 1203

Hi @karmadesign 

It's GemPages team here to support you!

The code used is correct, but the closing curly brace is put in an incorrect position. 

Incorrect position

Incorrect code.png

We've moved it to the correct one

Correct code.png

The issue is fixed now. Can you check on your end if it meets your expectation?

Thank you!

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center