scholarsayze Posted June 12, 2020 Share Posted June 12, 2020 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 Link to comment
abibacon Posted June 12, 2020 Share Posted June 12, 2020 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. 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
scholarsayze Posted June 12, 2020 Author Share Posted June 12, 2020 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
abibacon Posted June 12, 2020 Share Posted June 12, 2020 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
scholarsayze Posted June 12, 2020 Author Share Posted June 12, 2020 Oh wow that's cool!! Thank you very much that fixed it perfectly!! Link to comment
scholarsayze Posted June 12, 2020 Author Share Posted June 12, 2020 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
abibacon Posted June 12, 2020 Share Posted June 12, 2020 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
scholarsayze Posted June 12, 2020 Author Share Posted June 12, 2020 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 comment
abibacon Posted June 12, 2020 Share Posted June 12, 2020 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
scholarsayze Posted June 15, 2020 Author Share Posted June 15, 2020 No problem, done, thanks again for your help!! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.