Responsive section height for page.

I'm looking to have the third section align dynamically to the bottom of the browser window page open. I'm not looking for it to fix to the bottom of the window but align with it dynamically at page open.

Similar to if I was to add this code to the first section:

 min-height: 100vh !important;
    height: 100vh !important;

https://sartori5.squarespace.com/personal-styling-updated

Password:1234

Add to Design > Custom CSS

[data-section-id="6493722ef8b8345b59d4b6ce"] {
    min-height: unset !important;
    height: 10vh;
}

[data-section-id="6493722ef8b8345b59d4b6cb"], [data-section-id="6493722ef8b8345b59d4b6c8"] {
    min-height: unset !important;
    height: 45vh;
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS

[data-section-id="6493722ef8b8345b59d4b6ce"] {
    min-height: unset !important;
    height: 10vh;
}

[data-section-id="6493722ef8b8345b59d4b6cb"], [data-section-id="6493722ef8b8345b59d4b6c8"] {
    min-height: unset !important;
    height: 45vh;
}

 

@tuanphan That is fantastic, thank you. It looks and functions amazing on desktop. How might we also account for the content being mobile responsive to the mobile browser viewport? If found an article that discusses the topic but am unsure of how to apply it to our site. https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97

Add this code under

/* Mobile */
@media screen and (max-width:767px) {
    /* First section */
    [data-section-id="6493722ef8b8345b59d4b6c8"] {
        height: 30vh !important;
    }
    /* second section */
[data-section-id="6493722ef8b8345b59d4b6cb"] {
    height: 60vh !important;
}
    /* third section */
    [data-section-id="6493722ef8b8345b59d4b6ce"] {
    min-height: unset !important;
    height: 10vh;
}
}

15 hours ago, tuanphan said:

Add this code under

/* Mobile */
@media screen and (max-width:767px) {
    /* First section */
    [data-section-id="6493722ef8b8345b59d4b6c8"] {
        height: 30vh !important;
    }
    /* second section */
[data-section-id="6493722ef8b8345b59d4b6cb"] {
    height: 60vh !important;
}
    /* third section */
    [data-section-id="6493722ef8b8345b59d4b6ce"] {
    min-height: unset !important;
    height: 10vh;
}
}

@tuanphan Would I need to add a javascript solution to account for mobile browser address & navigation bars? For example how the first section https://grailwatch.com/ responds to the actual viewport in ios safari.

You can use add this code under

/* Code for iOS
@supports (-webkit-touch-callout: none) {
    /* First section */
    [data-section-id="6493722ef8b8345b59d4b6c8"] {
        height: 20vh !important;
    }
    /* second section */
[data-section-id="6493722ef8b8345b59d4b6cb"] {
    height: 40vh !important;
}
    /* third section */
    [data-section-id="6493722ef8b8345b59d4b6ce"] {
    min-height: unset !important;
    height: 40vh;
}
}

4 hours ago, tuanphan said:

You can use add this code under

/* Code for iOS
@supports (-webkit-touch-callout: none) {
    /* First section */
    [data-section-id="6493722ef8b8345b59d4b6c8"] {
        height: 20vh !important;
    }
    /* second section */
[data-section-id="6493722ef8b8345b59d4b6cb"] {
    height: 40vh !important;
}
    /* third section */
    [data-section-id="6493722ef8b8345b59d4b6ce"] {
    min-height: unset !important;
    height: 40vh;
}
}

 

@tuanphan With this code in place the first section now overlaps with the header section. I’ve attached the screenshot. The third section does align with navigation bar nicely though.

2 minutes ago, ccxwood said:

@tuanphan With this code in place the first section now overlaps with the header section. I’ve attached the screenshot. The third section does align with navigation bar nicely though.

You can adjust number 20 40 40 in the code

@tuanphan Thank you, adjusting the numbers cleaned up the overlapping header. I changed the color of the "scroll down" section to make it easier to discern the section transitions. I realized that the screen shot that showed the overlapped header seemed to show the third section align to the navigation bar but instead it simply expanded it height and the text deceivingly lined up properly.

The webkit touch callout code wasn't able to fix the issue. I adjusted the numbers to mimic how I want the page to respond the mobile browser. The screen capture below shows what I hope to have the page function as.