Homepage Image Setting

Hi - 

Anyone else has this problem with Squarespace? Everything on my page worked fine when I set it up months ago. Recently though I noticed my homepage image scoots up under the header when I go on the site. Only on mobile screen. Soon as I nudge the screen a bit - it sets in place. But it won't do so on its own, even after some time.

The idea here is that I have a set, still front page, that fits just within the screen and doesn't scroll anywhere. Here's the code I had, and which worked fine before.

@media screen and (max-width:767px) {

section#feature {

    min-height: unset !important;

    height: calc(~"90vh - 96px") !important;

}

}

@media screen and (max-width: 767px)

{ #feature

  {min-height: 78vh! important}

  }

I tried removing one of them and using only the other, setting only specific height, as well as adding these commands to the first, but no success:

transition: height 0.1s ease;

transform: translateZ(0);

I feel like squarespace always makes some internal update and it inevitably will mess something up in any one of my codes..

Site: alinahetz.com

Please update the code with this one : 

 

@media screen and (max-width:767px) {

    section#feature {
        height: 100vh !important;

    }
    #feature img {
        height: 100vh !important;
    }

}

let me know if it help you.

Hi David,

Thank you, I changed the code to the one you wrote and experimented with different vh values but it only enlarged an image and made the page scrollable, it still pushed the image under the header when first opened. 

I've tried many different code variations that should have been successful, but it's as if SquareSpace system doesn't read it. Not sure what's going on. 

On 5/4/2024 at 10:30 PM, AlinaH said:

Hi - 

Anyone else has this problem with Squarespace? Everything on my page worked fine when I set it up months ago. Recently though I noticed my homepage image scoots up under the header when I go on the site. Only on mobile screen. Soon as I nudge the screen a bit - it sets in place. But it won't do so on its own, even after some time.

The idea here is that I have a set, still front page, that fits just within the screen and doesn't scroll anywhere. Here's the code I had, and which worked fine before.

@media screen and (max-width:767px) {

section#feature {

    min-height: unset !important;

    height: calc(~"90vh - 96px") !important;

}

}

@media screen and (max-width: 767px)

{ #feature

  {min-height: 78vh! important}

  }

I tried removing one of them and using only the other, setting only specific height, as well as adding these commands to the first, but no success:

transition: height 0.1s ease;

transform: translateZ(0);

I feel like squarespace always makes some internal update and it inevitably will mess something up in any one of my codes..

Site: alinahetz.com

Hi @tuanphan ! Would you happen to have seen anything like this before? I've set different vh and px values but the issue persists. 

On 5/7/2024 at 11:26 PM, AlinaH said:

Hi @tuanphan ! Would you happen to have seen anything like this before? I've set different vh and px values but the issue persists. 

You mean move text align center horizontal + vertical + remove white space?

@tuanphan Remove the white space on the bottom and stop the cover image from shifting upwards under my header at the top (It's semi-transparent by design). That's what you can see in the first screenshot, then if I nudge the screen it jumps in place as in the last screenshot. But that's how it should be at all times, without the need to nudge.

The image is set to be the exact screen size on mobile, and not supposed to move anywhere outside of it. The idea is that its a fixed homepage.