Why are my web pages cropped at the top?

Store Design
,

Topic summary

A user’s website pages are displaying with the top portion cut off, affecting areas like the account/login page and breadcrumbs.

Proposed Solutions:
Multiple community members suggested adding CSS code to fix the cropping issue:

  • Add margin-top (ranging from 149px to 150px) to the .user-account class
  • Add margin-bottom (30px to 56px) to create proper spacing
  • Apply the CSS in different locations: bottom of CSS file, theme.css.base file, or dt-framework.css file

Current Status:
The original poster tried the first suggested solution but reported it didn’t work. Several alternative CSS snippets with slightly different margin values and implementation methods were subsequently offered, but no confirmation of a successful resolution has been provided yet.

Technical Details:
The fixes involve editing theme CSS files through the Shopify admin (Online Store > Themes > Edit code > Assets folder).

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi!

Someone know why my pages are croped at the top ?

https://lacouettefrancaise.fr/account/login for exemple…

Thanks!

Simon.

1 Like
2

Hi @slourdel

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.user-account {margin-top: 150px !important; margin-bottom: 30px !important;} .breadcrumbs {clear: both; position: relative; top: 9em; margin: 0 3.5em;} @media only screen and (max-width: 767px) { .user-account {margin-top: 15px !important;} .breadcrumbs {top: 0em; margin: 0 2.3em;} }

Regards,

San

3

Hi!

Thank you so much for your halp, but that doesnt work…

Best

4

@slourdel Add below css to resolve your crop problem :

.user-account {
    margin-top: 149px;
    margin-bottom: 56px;
}

Ujjaval_0-1681206095159.png
Ujjaval_0-1681206095159.png1582×794 29.3 KB

5

Hi @slourdel ,

Sorry for experiencing this problem. But the question make me confuse the breadcrumbs on the top pages (Someone know why my pages are croped at the top ? ) or the breadcrumbs on the user account which is crop?

This is the solution for the user account.

  • From your Admin page, go to Online store > Themes > click the three dots > Edit code
  • Find the Asset folder, and open the theme.css/base.css file
  • Add the code below at the very end of the file
.user-account {
    margin-bottom: 50px;
    margin-top: 50px;
}

Result:

Rose_Dim_0-1681210533172.png
Rose_Dim_0-1681210533172.png847×581 11.1 KB

you can also change the margin size, the sizes you like.

6

Hi @slourdel

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->dt-framework.css

.user-account {
    margin-top: 150px !important;
    margin-bottom: 50px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly