Jump to content

Full Page Sections

Recommended Posts

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

image.thumb.png.f3360a26e2d86c6d8e974add1d6c7fa5.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.thumb.png.f3360a26e2d86c6d8e974add1d6c7fa5.png

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

@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
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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
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?image.thumb.png.d28d85a1fa027f7a8104706095c3adf1.png

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?image.thumb.png.d28d85a1fa027f7a8104706095c3adf1.png

 

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.

Screen Shot 2020-12-07 at 5.26.13 PM.png

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

Screen Shot 2020-12-07 at 5.26.13 PM.png

Let remove what you added so I can see

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

image.thumb.png.afbd0605a76846a064639d58add0bd9f.png

image.thumb.png.1b89b9597d481d0d983a846b97157c18.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.thumb.png.afbd0605a76846a064639d58add0bd9f.png

image.thumb.png.1b89b9597d481d0d983a846b97157c18.png

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

image.thumb.png.afbd0605a76846a064639d58add0bd9f.png

image.thumb.png.1b89b9597d481d0d983a846b97157c18.png

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.

Screen Shot 2020-12-07 at 6.26.35 PM.png

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

Screen Shot 2020-12-07 at 6.26.35 PM.png

I did not edit the desktop mode as I saw it looks identical with the target site, that why I use media query

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Screen Shot 2020-12-07 at 6.57.39 PM.png

Screen Shot 2020-12-07 at 6.57.57 PM.png

Screen Shot 2020-12-07 at 7.01.01 PM.png

Screen Shot 2020-12-07 at 7.01.13 PM.png

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.