niloc3 Posted November 30, 2020 Share Posted November 30, 2020 Site URL: https://www.colinmacknair.com/ Hello, I'm trying to create a one page website that will just be a solid black background so that if someone is on a web browser there's nowhere to scroll and it will just resize with the window it's being viewed. Here's an example website that I'm trying to mimic. https://www.petermckinnon.com/ The website will resize with the window and if it is resized to portrait mode it will automatically switch to the mobile view. Note: When my website is in mobile, this effect works where I don't see any white space at the bottom of the page. Thank you! Link to comment
Beyondspace Posted December 5, 2020 Share Posted December 5, 2020 On 12/1/2020 at 2:23 AM, niloc3 said: Site URL: https://www.colinmacknair.com/ Hello, I'm trying to create a one page website that will just be a solid black background so that if someone is on a web browser there's nowhere to scroll and it will just resize with the window it's being viewed. Here's an example website that I'm trying to mimic. https://www.petermckinnon.com/ The website will resize with the window and if it is resized to portrait mode it will automatically switch to the mobile view. Note: When my website is in mobile, this effect works where I don't see any white space at the bottom of the page. Thank you! I helped you with custom css @media only screen and (max-width: 800px) { body { overflow-x: hidden; overflow-y: scroll; } section[data-section-id="5fbae80405f44a5f709446f4"] { display: block; } section[data-section-id="5fbae80405f44a5f709446f4"] .section-background { width: 100vw; position: relative; height: 50vh; margin-left: 0; } #block-yui_3_17_2_1_1606943222793_5471 .sqs-block-image-figure { width: 150px; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
niloc3 Posted December 7, 2020 Author Share Posted December 7, 2020 On 12/5/2020 at 1:35 AM, bangank36 said: I helped you with custom css @media only screen and (max-width: 800px) { body { overflow-x: hidden; overflow-y: scroll; } section[data-section-id="5fbae80405f44a5f709446f4"] { display: block; } section[data-section-id="5fbae80405f44a5f709446f4"] .section-background { width: 100vw; position: relative; height: 50vh; margin-left: 0; } #block-yui_3_17_2_1_1606943222793_5471 .sqs-block-image-figure { width: 150px; } } I appreciate your help man! But to be honest, I'm not exactly sure how this is working with what I'm trying to do as it seems to only look proper if it's in mobile view? Could you maybe explain what you're trying to do with the code? Link to comment
niloc3 Posted December 7, 2020 Author Share Posted December 7, 2020 @bangank36 Do you happen to know why, if I try to make the section on the left with all my content fixed to height:100vh that it doesn't work? I want the left side of the screen to be a fixed height of 100vh much like the section background on the right side of the screen. See my code below: body{ overflow-y:hidden; } [data-section-id="5fbae80405f44a5f709446f4"]{ //display: block; background-color: #000000; @media(min-width:767px){ .section-background{ width:50vw; height:100vh; margin-left:50%; position: fixed; } .content-wrapper { width:50vw; height:100vh; margin-right:50% !important; } } Link to comment
Beyondspace Posted December 7, 2020 Share Posted December 7, 2020 4 minutes ago, niloc3 said: I appreciate your help man! But to be honest, I'm not exactly sure how this is working with what I'm trying to do as it seems to only look proper if it's in mobile view? Could you maybe explain what you're trying to do with the code? I just made it working the the example, on 800px wide is turn the cover 100% width and put the text content to the bottom BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted December 7, 2020 Share Posted December 7, 2020 1 minute ago, niloc3 said: @bangank36 Do you happen to know why, if I try to make the section on the left with all my content fixed to height:100vh that it doesn't work? I want the left side of the screen to be a fixed height of 100vh much like the section background on the right side of the screen. See my code below: body{ overflow-y:hidden; } [data-section-id="5fbae80405f44a5f709446f4"]{ //display: block; background-color: #000000; @media(min-width:767px){ .section-background{ width:50vw; height:100vh; margin-left:50%; position: fixed; } .content-wrapper { width:50vw; height:100vh; margin-right:50% !important; } } try to wrap the @media query outside of the selector like I did BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
niloc3 Posted December 7, 2020 Author Share Posted December 7, 2020 19 minutes ago, bangank36 said: try to wrap the @media query outside of the selector like I did Sadly that doesn't do anything. I also don't really understand how your code would work with my stuff again, because if it's in desktop mode the sizing is all wrong. @media only screen and (min-width: 767px) { body{ overflow-y:hidden; } [data-section-id="5fbae80405f44a5f709446f4"]{ background-color: #000000; @media(min-width:767px){ .section-background{ width:50vw; height:100vh; margin-left:50%; position: fixed; } .content-wrapper { width:50vw; height:100vh; margin-right:50% !important; } } } Link to comment
Beyondspace Posted December 8, 2020 Share Posted December 8, 2020 2 hours ago, niloc3 said: Sadly that doesn't do anything. I also don't really understand how your code would work with my stuff again, because if it's in desktop mode the sizing is all wrong. @media only screen and (min-width: 767px) { body{ overflow-y:hidden; } [data-section-id="5fbae80405f44a5f709446f4"]{ background-color: #000000; @media(min-width:767px){ .section-background{ width:50vw; height:100vh; margin-left:50%; position: fixed; } .content-wrapper { width:50vw; height:100vh; margin-right:50% !important; } } } what is wrong on desktop, it looks like PETER MCKINNON with image on the right and content on the left? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
niloc3 Posted December 8, 2020 Author Share Posted December 8, 2020 7 minutes ago, bangank36 said: what is wrong on desktop, it looks like PETER MCKINNON with image on the right and content on the left? Are you sure you sent me the right code snippet? When I use your code, it effectively doesn't do anything to my page...It just has all elements stacked on top of each other. Here's the code snippet I'm using to be sure. @media only screen and (max-width: 800px) { body { overflow-x: hidden; overflow-y: scroll; } section[data-section-id="5fbae80405f44a5f709446f4"] { display: block; } section[data-section-id="5fbae80405f44a5f709446f4"] .section-background { width: 100vw; position: relative; height: 50vh; margin-left: 0; } #block-yui_3_17_2_1_1606943222793_5471 .sqs-block-image-figure { width: 150px; } } I also checked the advanced settings for that page and there's no additional code injection. I also attached a screenshot of how it looks with your code snippet. Link to comment
Beyondspace Posted December 8, 2020 Share Posted December 8, 2020 2 minutes ago, niloc3 said: Are you sure you sent me the right code snippet? When I use your code, it effectively doesn't do anything to my page...It just has all elements stacked on top of each other. Here's the code snippet I'm using to be sure. @media only screen and (max-width: 800px) { body { overflow-x: hidden; overflow-y: scroll; } section[data-section-id="5fbae80405f44a5f709446f4"] { display: block; } section[data-section-id="5fbae80405f44a5f709446f4"] .section-background { width: 100vw; position: relative; height: 50vh; margin-left: 0; } #block-yui_3_17_2_1_1606943222793_5471 .sqs-block-image-figure { width: 150px; } } I also checked the advanced settings for that page and there's no additional code injection. I also attached a screenshot of how it looks with your code snippet. Let remove what you added so I can see BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
niloc3 Posted December 8, 2020 Author Share Posted December 8, 2020 Sorry I'm misunderstanding what you're asking. The only code present is the code that you sent me initially. 1 minute ago, bangank36 said: Let remove what you added so I can see Link to comment
Beyondspace Posted December 8, 2020 Share Posted December 8, 2020 4 minutes ago, niloc3 said: Sorry I'm misunderstanding what you're asking. The only code present is the code that you sent me initially. Yes, remove it please BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
niloc3 Posted December 8, 2020 Author Share Posted December 8, 2020 1 minute ago, bangank36 said: Yes, remove it please Okay sure, website is back to the code that I had. Link to comment
Beyondspace Posted December 8, 2020 Share Posted December 8, 2020 So this snippet, it will only affect screen width <800px, split the image stacked together like the website petermackin... it not affect when screen width > 800px @media only screen and (max-width: 800px) { body { overflow-x: hidden; overflow-y: scroll; } section[data-section-id="5fbae80405f44a5f709446f4"] .content-wrapper { background: #000; } section[data-section-id="5fbae80405f44a5f709446f4"] { display: block; } section[data-section-id="5fbae80405f44a5f709446f4"] .section-background { width: 100vw; position: relative; height: 50vh; margin-left: 0; } #block-yui_3_17_2_1_1606943222793_5471 .sqs-block-image-figure { width: 150px; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
niloc3 Posted December 8, 2020 Author Share Posted December 8, 2020 4 minutes ago, bangank36 said: So this snippet, it will only affect screen width <800px, split the image stacked together like the website petermackin... it not affect when screen width > 800px @media only screen and (max-width: 800px) { body { overflow-x: hidden; overflow-y: scroll; } section[data-section-id="5fbae80405f44a5f709446f4"] .content-wrapper { background: #000; } section[data-section-id="5fbae80405f44a5f709446f4"] { display: block; } section[data-section-id="5fbae80405f44a5f709446f4"] .section-background { width: 100vw; position: relative; height: 50vh; margin-left: 0; } #block-yui_3_17_2_1_1606943222793_5471 .sqs-block-image-figure { width: 150px; } } Yeah man, I don't know what's up but everytime I use your code snippet the website just doesn't look presentable. I'm doing a direct copy and paste of what you're giving me. Do you want me to paste the code snippet you just put and let you see the result? Link to comment
niloc3 Posted December 8, 2020 Author Share Posted December 8, 2020 36 minutes ago, bangank36 said: So this snippet, it will only affect screen width <800px, split the image stacked together like the website petermackin... it not affect when screen width > 800px @media only screen and (max-width: 800px) { body { overflow-x: hidden; overflow-y: scroll; } section[data-section-id="5fbae80405f44a5f709446f4"] .content-wrapper { background: #000; } section[data-section-id="5fbae80405f44a5f709446f4"] { display: block; } section[data-section-id="5fbae80405f44a5f709446f4"] .section-background { width: 100vw; position: relative; height: 50vh; margin-left: 0; } #block-yui_3_17_2_1_1606943222793_5471 .sqs-block-image-figure { width: 150px; } } I think I understand now...You were trying to provide a solution for the mobile aspect of my website. Thank you for this, that definitely works. However, the part I'm struggling with is when the website is in desktop mode: the content on the left side of the screen overflows instead of resizing to the full height of the browser window. Even in mobile, you can see that there's extra spacing at the bottom of the website that shouldn't be there. Link to comment
Beyondspace Posted December 8, 2020 Share Posted December 8, 2020 28 minutes ago, niloc3 said: I think I understand now...You were trying to provide a solution for the mobile aspect of my website. Thank you for this, that definitely works. However, the part I'm struggling with is when the website is in desktop mode: the content on the left side of the screen overflows instead of resizing to the full height of the browser window. Even in mobile, you can see that there's extra spacing at the bottom of the website that shouldn't be there. I did not edit the desktop mode as I saw it looks identical with the target site, that why I use media query BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
niloc3 Posted December 8, 2020 Author Share Posted December 8, 2020 1 minute ago, bangank36 said: I did not edit the desktop mode as I saw it looks identical with the target site, that why I use media query It's close! Let me try to show you what I mean. If you resize the browser, you'll notice that the social media links at the bottom will get cut off when the browser window is big...If you make the browser window smaller the links will be on the same page. Picture 1: Full screen, Picture 2: Smaller browser screen I'm trying to get it so that there is no overflow, the content wrapper will just resize based on the browser window. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.