Jump to content

Blocks in header getting cut off when window resized.

Recommended Posts

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 - 

PAGE HEADER CODE INJECTION -

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

Edited by MillyBanks
updated code
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.