Jump to content

Responsive section height for page.

Recommended Posts

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

SRTISCREEN.png

Edited by ccxwood
Clarified
Link to comment
  • ccxwood changed the title to Responsive section height for page.
  • Replies 8
  • Views 769
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Link to comment

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;
}
}

image.thumb.png.d8e171993e3fcb9c56da0d73174847af.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

IMG_70873E33F92D-1.jpeg

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

74B0B99A-55C2-4D92-80A9-7ADF4584A31E.png

Link to comment
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.

74B0B99A-55C2-4D92-80A9-7ADF4584A31E.png

You can adjust number 20 40 40 in the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.