Some templates have a white space on top WHY? - Ride Theme

[GASTY]

Hi everyone! I’m having some weird issue on some of my templates. I realised that in the contact page, when looking at it in a big monitor (in my macbook air looks fine), theres is a big gap between the header and the page content:

But Theres actually nothing there! Just the header - page - contact form. And if I try to move the top padding slider of the page content, doesn’t work! So I tried creating a new template and start again, and the same happened! So weird, does anyone what could be happening?

In my macbook looks perfect:

[AnneLuo]

Hi, @GASTY

Please share the store URL so that I can assist you.

[GASTY]

Thank you @AnneLuo , this is the page: https://gastonduflos.com/pages/contact

[tim_1]

Dawn has this CSS in layout/theme.liquid:

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
   . . .

I believe the goal is to force footer to be at the bottom of the window if template content is not high enough to fill entire window.

The 1fr line supposed to be the <main id=“MainContent” ..> which will grow while other lines will fit contents.

However, you have an app EcomSend popups which creates an element above the and this breaks the layout.

On the screenshots: current site / display: grid; disabled / “offending” element removed.

If you plan on keeping the app, you may either remove display: grid; or, alternatively, change
grid-template-rows: from “auto auto 1fr auto” to “auto auto auto 1fr auto”.

Probably the better option is to have it like this – should be a bit more flexible then using grid

body {
  display: flex;
  flex-direction: column;
}

main#MainContent {
  flex-grow: 1;
}

[GASTY]

Thank you @tim_1 , I’m not a coding expert so I don’t understand your message too much. Fantastic explanation tho!

So just to recap, should I add that code into the css file or where?? Or maybe should I just add some content below the contact form so the page is bigger?

[tim_1]

Yeah, just add the last snippet of the code to the very bottom of the assets/base.css.

Generally, now I do not recommend editing theme code where possible and rather prefer using “Custom CSS” input either in section or theme settings. This will make theme updates easier.

But given you’ve already modified this file…