Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I make my first section appear 100% View Port on Desktop and Mobile?


Go to solution Solved by abibacon,

Question

  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Setting it to 100 should solve your issue, if not add this css section[data-section-id="5ed686114dd6953ec47a4866"] { height: 100vh !important; }  

No problem, done, thanks again for your help!!

Posted Images

9 answers to this question

Recommended Posts

  • 1
3 minutes ago, scholarsayze said:

Thank you so much abibacon,

I apologise, the password is bluebird.

And I am using the 7.1 version (very new to Squarespace!)

So OK if I adjust the height using the sliders, should I set it at 100? Will that make it 100% view port? Currently I notice on mobile device, the banner goes over the view port so it's a little odd having to scroll to see the remaining part of the header text!

Many thanks!

Setting it to 100 should solve your issue, if not add this css

section[data-section-id="5ed686114dd6953ec47a4866"] {
height: 100vh !important;
}

 

Link to post
  • 1
53 minutes ago, scholarsayze said:

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-v10

Hello, I would like to know if it is possible to make my first banner section 100% view port on desktop and mobile. The user should be able to see the entire first banner in full view port if possible.

Please advise,

Many thanks,

Best,

Faizal

Hi Faizal, 

You haven't provided a password so I cannot see the site. 

Is this a Squarespace 7 or 7.1 site?

If it's a Squarespace 7 site you need to use the url slug for the page section, for example #banner and add css such as 

#banner {
height: 100vh !important;
}

if it is a Squarespace 7.1 site you can adjust the height in the menu as shown in the attached screenshot which is found by editing the section and clicking the pencil icon. 

 

Screenshot 2020-06-12 at 14.18.27.png

Edited by abibacon
Link to post
  • 0

Thank you so much abibacon,

I apologise, the password is bluebird.

And I am using the 7.1 version (very new to Squarespace!)

So OK if I adjust the height using the sliders, should I set it at 100? Will that make it 100% view port? Currently I notice on mobile device, the banner goes over the view port so it's a little odd having to scroll to see the remaining part of the header text!

Many thanks!

Link to post
  • 0

Sorry abibacon, I was wondering if there is an easy way to find the number reference for the section id's?

Sometime when I try to scan through the Inspect Elements in DevTools, I just can't seem to find the right id?

I'm trying to learn the code what I am applying to the site so hopefully I can understand what the code is doing!

Many thanks!

Link to post
  • 0
40 minutes ago, scholarsayze said:

Sorry abibacon, I was wondering if there is an easy way to find the number reference for the section id's?

Sometime when I try to scan through the Inspect Elements in DevTools, I just can't seem to find the right id?

I'm trying to learn the code what I am applying to the site so hopefully I can understand what the code is doing!

Many thanks!

Please could you mark my answer as the correct answer. 

You can download an extension for chrome called 'Squarespace ID finder' or similar, when activated it shows you all of the id's for your page. 

Link to post
  • 0

Thanks so much I just installed it awesome!

Yes of course, sorry I'm fairly new in the forum do I just click the Tick "Mark this as a best answer" and "Vote this answer up"? 

Link to post
  • 0
4 hours ago, scholarsayze said:

Thanks so much I just installed it awesome!

Yes of course, sorry I'm fairly new in the forum do I just click the Tick "Mark this as a best answer" and "Vote this answer up"? 

Yes please 🙂 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...