Shopify Single Static Section Fill Page?

Question

When using a single section in Shopify how can you grow the div to fill the whole screen?

I have modified the theme.scss file and added a class

.hero--dsfull {
  height: 100%;
}

Butt the section needs to FILL the window not just the div it is in.

See Example: https://bunc.bike/pages/test

Screenshot showing white space to be removed

I came across a potential solution but I do not know how to implement it: Full height sections single page

Answer 1

If you want to that /pages/test page only then do like this.

<div class="page-container {% if page.url == '/pages/test' %}full-height{% endif %}" id="PageContainer"></div>

Add below SCSS code in your theme.scss.liquid file

.page-container{
    &.full-height{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;
    }
}

OR

Add below code in template.liquid or page.liquid file.

{% if page.url == '/pages/test' %}
<style type="text/css">
    .page-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;
    }
</style>
{% endif %}

This solution for specific page based on page.url not for global/all-pages solution.

Hope this will help you!