Jump to content

Sorting out the Safari iPhone viewport issue. 100vh section fit within the viewport.

Recommended Posts

Hey,

 

Does anyone know how to deal with the Safari iPhone viewport issue?

My site is set up so that on the initial load, you see a big image, (section height= 80) and then a title section below (section height = 20).

 

This is working perfectly on a desktop to sum up to 100vh for desktop. However, when I load my site on iPhone, using Safari, the Safari search bar, sits over part of the title section.

 

Is there any way to make the gap between the safari search bar and the top of the page be the "100vh" viewport and not the bottom of my screen? I hope this makes sense.

Site: 

https://hexahedron-soybean-zdl8.squarespace.com/

Password: testing123

Thanks,

Jon

Link to comment
1 hour ago, creedon said:

Are you referring to the address/toolbar?

IMG_4148.thumb.jpg.471475f9cb1245f8f23c7f456f339c88.jpg

Yes, I am referring to the search/toolbar that safari gives.

Through my limited knowledge and research, it seems that this is exactly what I am trying to achieve in this video. However, I am not sure how/if you can implement it on a squarespace site.

This seems to be implementing svh for a measurement of height.


https://www.youtube.com/watch?v=pOuE9sgK9jY

 

The video shows how to acheive this effect on one section at a full height of 100vh. 

They add the code to make it responsive to mobile browser toolbars using a new measurement unit of 100 svh. (Can also use dvh or lvh for other effects)

 

If i could get this working that would be amazing. 

 

I feel my site is slightly different however because I am actually using two sections to make up the entire 100vh.

 

Image section: 83 vh

+

Title section (This is the white section below with blue text) = 17vh

Total viewport = 100vh.

 

This works perfectly on desktop however when it comes to mobile, the heights are being measured as if the toolbar on mobile browsers is collapsed. This video seems to show the solution however as I mention, I'm not sure how to or if it can even be implemented. 

 

Many thanks in advance,

Jon 

 

Link to comment

I don't have a solution but some thoughts. The svh unit and others in the video might help. Browser support seems good with the exception of FireFox (3% of browser use).

If you can't get a good CSS solution use the JavaScript 1px scroll down technique. It's a hack but it does seem to work.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
13 hours ago, creedon said:

I don't have a solution but some thoughts. The svh unit and others in the video might help. Browser support seems good with the exception of FireFox (3% of browser use).

If you can't get a good CSS solution use the JavaScript 1px scroll down technique. It's a hack but it does seem to work.

Would you be able to explain the JavaScript 1px scroll down technique?

I am fairly new to website building so learning as I go. 

What would this technique be and how would I implement it? 

Thanks,

Jon

Link to comment

The basic technique is to use JavaScript to scroll the page by one pixel which causes the address/toolbar to shrink.

A basic example.

<script>

  scrollBy ( 0, 1 );
  
  </script>

You'd throw this into Settings > Advanced > Code Injection > FOOTER.

You'd need the business plan or above.

You may want to throw a matchMedia into the Javascript to only do the scroll on mobile breakpoints.

If you had only a single section I think the svh would work a treat. But with two sections involved, 80/20 I just don't see any easy way off the top of my head.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Ahh, I see, that makes sense with the JavaScript solution. 

 

Hypothetically, how would you make svh work with a 100vh section? 
If you could help me with that, that would be amazing. I will set my Contact to have a 100vh section height now. I will use this page to test.

https://hexahedron-soybean-zdl8.squarespace.com/contact

 

If I can get it to work with 100vh section, I might actually have a think about swapping my site layout so that it is using a 100vh section at the start of a page.

 

 

Link to comment
Quote

Hypothetically, how would you make svh work with a 100vh section? 
If you could help me with that, that would be amazing. I will set my Contact to have a 100vh section height now. I will use this page to test.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  #page .page-section:first-child.section-height--large:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ) {
  
    min-height : 100svh;
    
    }
    
  </style>

This is for v7.1.

This is for one page. If you need the effect on multiple pages then the code would need to be altered.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
13 hours ago, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  #page .page-section:first-child.section-height--large:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ) {
  
    min-height : 100svh;
    
    }
    
  </style>

This is for v7.1.

This is for one page. If you need the effect on multiple pages then the code would need to be altered.

Let us know how it goes.

So this seems to get svh working however I was having a play around with it to understand what its doing and noticed a few things.

1) The code targets "section-height--large".

This means that only sections set to "Large" are effected. This is good however is there a way to set a custom height here? I noticed that even if i set my section height to "100" - which seems like its the same as clicking "Large" the code doesn't pick it up as it is only targeting "Large".

Is there a way where the code could target "section-height--custom" and then set a custom value of say 85?


If this "section-height--custom" is able to be targeted then i think I have a perfect solution for what I'm after.




2) More curiosity to help my learning. Why are the other ":not" values included in that code? The code seems to work without them, so i just wanted to understand what they are being used for. 



3) The video also mentions using a fall back code of just "height: 100vh" and placing it before the min-height: 100svh value. This should work if I just add this in right? 



4) Finally, am I correct in saying I could add a regular CCS media query in between the <style> tags to make this only happen on mobile if I needed that use case? 



Thank you very much for your help so far as this is something that I have been looking into for a while.

Link to comment

Hey @creedon

After playing around I seem to have built something that is working exactly how I would like it.

I thought I would share it in here so other people can use it, see if it makes sense to you that it hopefully shouldn't cause errors.


Page Header Injection Code below:

<style>

    #page .page-section:first-child.section-height--medium {

    min-height: 83svh !important;

    max-height: 83svh !important;

    } 

  section[data-section-id="6352d6d11a264cad7f4e2927"] {

    min-height: 17svh !important;

    max-height: 17svh !important; 

    }

  </style>

 

CSS code:

 

//Title Bar Section - Content Wrapper Padding//

section[data-section-id="6352d6d11a264cad7f4e2927"] {

  .content-wrapper {

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}

}



Explanation:

I am using this code to set the custom heights that way. I have set the section height on my banner image to be "Medium".
I then set the section height of my title section below it to my desired custom height, "17" 

Then in the page header injection code, I set the min and max values of height to the custom height i want my banner image. In this case 83svh. I believe this means that the section height will always be 83svh which is exactly what we want. 

Then below this, I have added the section ID for that page's title section.
I have set min and max heights of 17svh to match my initial custom height of 17. This completed the 100svh viewport total.
83svh + 17svh = full viewport using two sections. 


Then the final part of this to make it work was to remove the content-wrapper for my title bar section.

I did this in CSS using the code above.
The code is simply targeting the title section's section ID and setting the padding of the content-wrapper to 0px for the top and bottom.


This all seems to be working and behaving exactly how I would like it to.

Any thoughts or suggestions on this would be great because as I say, I am very new to this still. 


Thanks very much,

Jon 

Link to comment

A final note.

I also noticed that when it comes to using this on my homepage where I had a plugin that was creating sliding images, this part of the code didn't seem to be working:

"#page .page-section:first-child.section-height--medium"

 

I think its because there's multiple sections that make up the "first section" if you will. 

 

So, instead, I have changed that part of the code to just use section IDs to target those sections and it seems to work. 

Rewritten code:

<style>
  
[data-section-id="63501029d0c1afc30f3ee79f"],
[data-section-id="63501041413276638cb717f2"],
[data-section-id="6350102f76836d87c08c1cff"],
[data-section-id="6350103420fec952c33006fe"],
[data-section-id="6350103650e9e5c183af3066"],
[data-section-id="6350103944b3b8cbe1cbe50b"],
[data-section-id="6350103ce0d069db53bcd697"],
[data-section-id="6350103f5caa97d1d73eb016"],
[data-section-id="6369120ea9268a1bdad16a13"],
[data-section-id="6422c32efe8af81431569d20"],
[data-section-id="6422c332c668da0fa7fba3a2"]
  {
  
    min-height: 83svh !important;
       max-height: 83svh !important;
    
    }


section[data-section-id="63d25b473ecfcf04206ec6bd"] {
  
    min-height: 17svh !important;
    max-height: 17svh !important;
    
    }

  </style>

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.