Blocks in header getting cut off when window resized.

Site URL: https://kazoo-lanternfish-ejx7.squarespace.com/home/#/new-page-1

Hi, 

I am building a custom sales page on Brine. I have removed the header logo and navigation and am now building out my 'header' of the sales page. 

I have managed to code the background image, logo & text to sit well when the window is full screen (13 inch) but any resizing sends things up and it gets cropped. 

I am wondering if someone has had similar happen? I am hoping to be able to code this for Desktop, Tablet and Mobile. 

The code I have used so far is as follows - 

<style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>

Custom CSS - 

//Sales Page header

//header image
#block-yui_3_17_2_1_1652461734997_2785{
  position: ;
  z-index:1!important;
 padding-top: 1%!important;
  margin-top: -26% !important;
  margin-left: -6.5% !important;
  margin-right: -6.5% !important;
  margin-bottom: 0px !important;
}

//header Logo
#block-yui_3_17_2_1_1652455646794_1841 {
  position: relative;
  z-index: 100;
  margin-left: auto;
margin-right: auto;
  top:-36em;
max-width: 150px!important;
}

//Header Text Block

#block-627e75e34300671849380e1a p {color: white!important;}

#block-627e75e34300671849380e1a {
  position: relative;
  z-index: 100;
  top: -24em;
  margin-left: auto;
margin-right: auto;
}

Any help is appreciated 🙂 

Hi,

Can you take some screenshots when the site have problem?

Full screen (13 inch)

smaller window on desktop it starts to creep completely off the screen

Tablet - 

Mobile - 

Hi @tuanphan any idea on how I can solve this? 🙂

Try adding to Design > Custom CSS

section#practical-wellbeing-strategies {
    background-image: url(https://images.squarespace-cdn.com/content/v1/624f749977e23321729c025f/4d42b68c-1a56-402c-8ce0-bfae3d8375ef/Shift+Wellbeing+in+Schools.jpg?format=2500w);
    background-size: cover;
}
div#block-yui_3_17_2_1_1653659055688_3909 {
    opacity: 0;
}
@media screen and (max-width:640px) {
#block-627e75e34300671849380e1a p {
    line-height: 28px !important;
}}