Jump to content

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

Recommended Posts

  • Replies 9
  • Views 3.4k
  • Created
  • Last Reply
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

Learn CSS - abibacon.com/css-course

Reach out for Custom Coding - abibacon.com

Developer & Support Specialist at will-myers.com (Affiliate Link)

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment

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

 

Learn CSS - abibacon.com/css-course

Reach out for Custom Coding - abibacon.com

Developer & Support Specialist at will-myers.com (Affiliate Link)

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment

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

Learn CSS - abibacon.com/css-course

Reach out for Custom Coding - abibacon.com

Developer & Support Specialist at will-myers.com (Affiliate Link)

If you'd like to make a contribution for my time you can Buy Me A Coffee.

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

Learn CSS - abibacon.com/css-course

Reach out for Custom Coding - abibacon.com

Developer & Support Specialist at will-myers.com (Affiliate Link)

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.