Full Page Sections

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!

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

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?

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

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

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

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

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?

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.

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

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

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

1 minute ago, bangank36 said:

Yes, remove it please

Okay sure, website is back to the code that I had.

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

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?

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.

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

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.