Jump to content

Need help with layout

Recommended Posts

Hi,

I'm hoping someone can help me, I've just updated my main image used on my homepage which has a 50/50 split. After updating it, something seems to have gone wrong on my mobile version! And I can't for the life of me figure out what I need to change?

I've attached a screenshot of what it used to look like - where the image sat underneath the header and the text followed after that. Now they seem to all sit on top of each other?

Screenshot 2022-11-30 at 09.27.16.png

Screenshot 2022-11-30 at 09.32.13.png

Screenshot 2022-11-30 at 09.33.27.png

Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Thanks, did you change anything except the photo? What method did you use to get the split layout?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
4 minutes ago, Ziggy said:

Thanks, did you change anything except the photo? What method did you use to get the split layout?

I believe this part - my custom css is quite lengthy now so i'm struggling to find which bit could have gone wrong  

 

 

section[data-section-id="5f5a3269c21f38271ec69c21"] {
  background-color:#F1F1EF;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:400px;
    }
  }
}

Link to comment
2 minutes ago, Cadel said:

I believe this part - my custom css is quite lengthy now so i'm struggling to find which bit could have gone wrong  

 

 

section[data-section-id="5f5a3269c21f38271ec69c21"] {
  background-color:#F1F1EF;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:400px;
    }
  }
}

 

 

This is everything I have entered if this helps at all - apologies I was learning to begin with so I wish I had labelled everything better 

 

 

 

#header {
 position: fixed;
 padding: 0;
 background-color: rgba(255,255,255,0)!important;
    border-bottom:1px solid #363824;
  }


#header {
  @media screen and (max-width: 640px) {
 position: fixed;
 padding: 0;
 background-color: rgba(255,255,255,0)!important;
    border-bottom:1px solid black;
  }}


#block-yui_3_17_2_1_1594913791412_18217 {
  position: absolute !important; 
  top: 340px;
    left: -160px;
  width: 30%
}
#block-yui_3_17_2_1_1596555691417_9105 {
   position: absolute !important;
  top: -5px ;
    right: -80px;
  width: 16%
}
section[data-section-id="5f10521c62abe31aca29e6d9"] {
  padding: +10% ;
}

#block-yui_3_17_2_1_1597084340795_11121 {
  top: -300px;
    right: -900px;
  width: 15%
}
#block-yui_3_17_2_1_1597084740076_18187{
  top: -370px;
    right: -855px;
  width: 15%;
}
#block-c6b475c198057ff9a6fd {
  width:75%;
    right:-15%;
  padding-top: 0 !important;
}
/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:1px) {
 /* hide navigation */
    .header-nav {
    display: non;
}
/* Hide header button */
.header-actions {
    display: contact us;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}
.header-menu-nav-item {line-height: 0px!important;}

.header-menu-nav-item {
@media screen and (max-width: 640px) {
line-height: 20px!important;
  }}

.header-menu-nav-item a {
    font-size: 22px;
}


#block-yui_3_17_2_1_1597091406341_11057 {
     position: relative !important;
  top: -260px;
    right: -1050px;
  @media screen and (min-width:640px) and (max-width:1050px) {
      top: -275px;
    right: -975px;
}}

#block-yui_3_17_2_1_1597091406341_11057 {
     @media screen and (max-width:640px) { 
      position: relative !important;
      top: -125px ;
    right: -700px ;
}}
#block-yui_3_17_2_1_1597091406341_9652 {
     position: relative !important;
   top: 40px ;
      right: 50px;
   @media screen and (min-width:640px) and (max-width:1050px) {
      top: 125px;
    right: -25px;
  }}

#block-yui_3_17_2_1_1597091406341_9652 {
     @media screen and (max-width:640px) { 
      position: relative !important;
      top: 400px ;
    right: -300px ;
}}

#block-yui_3_17_2_1_1599733110428_13457 {
  max-width:70%;
  margin: auto;
  margin-left: 15%;
     @media screen and (max-width:640px) { 
       max-width:75%;
       margin: auto;
}}

#block-yui_3_17_2_1_1599733110428_18901 {
  max-width:70%;
  margin: auto;
     @media screen and (max-width:640px) { 
       max-width:75%;
       margin: auto;
}}

#block-yui_3_17_2_1_1599733110428_16422 {
  max-width:70%;
  margin: auto;
  margin-right: 15%;
     @media screen and (max-width:640px) { 
       max-width:75%;
       margin: auto;
}}
     

#block-6a0c528bf70451b3418d {
  width: 75% }
#block-3c44210af3e680ea0c45 {
  width : 75%
}
#block-21f3c7984dcc741227d2 {
  max-width : 80% ;
margin: auto;
}

#block-ec4e89a207517be23b40 {
  width : 80% ;
margin: auto;
}
#block-yui_3_17_2_1_1599734989031_15737 {
  position : absolute;
        z-index: 1;
  width : 30% ;
    right : -150px ;
  bottom : 2px
}
#block-df358c21ae8ecca27177 {
   width : 75% ;
margin: auto;
}

@media screen and (max-width: 640px) {h1 { font-size: 30px!important; }}
@media screen and (max-width: 640px) {h2 { font-size: 24px!important; }}
@media screen and (max-width: 640px) {h4,h3 { font-size: 20px!important; }}
@media screen and (max-width: 640px) {p1,p2,p3,p4 { font-size: 8px!important; }}

#block-yui_3_17_2_1_1596555691417_9105 {
  @media screen and (max-width: 640px) { 
  width:30%;
  right:-25%;
      bottom:50%
 }
}
#block-yui_3_17_2_1_1594913791412_18217 {
   @media screen and (max-width: 640px) { 
  width:45%;
  left:-30%;
  top:65%
}
}


section[data-section-id="5f5a3269c21f38271ec69c21"] {
  background-color:#F1F1EF;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:400px;
    }
  }
}
section[data-section-id="5f315798877e834e6139375d"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
    padding-bottom: 0 !important;
      padding-top: 0 !important;
}

#block-yui_3_17_2_1_1599923719969_16306 {
 position: absolute;
  top: 200px;
    left: -275px;
  width: 40%;
}
#block-yui_3_17_2_1_1599923719969_17460 {
   position: absolute;
  top: -100px;
    right: -250px;
  width:20%
}
#block-yui_3_17_2_1_1599923719969_16306 {
  @media screen and (max-width: 640px) { 
  width:45%;
  left:-20%;
      top:80%

 }
}
#block-yui_3_17_2_1_1599923719969_17460 {
   @media screen and (max-width: 640px) { 
  width:33%;
  left:75%;
  top:-5%
}
}

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   float: none;   width: 120%;   position: absolute;   bottom: 50%;   left: 50%;   -webkit-transform: translate(-50%,-50%);       -ms-transform: translate(-50%,-50%);           transform: translate(-50%,-50%);   -webkit-box-pack: justify;       -ms-flex-pack: justify;           justify-content: space-between;   z-index: 9; }

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {  
     @media screen and (max-width: 640px) { 
float: none;   width: 100%;   position: absolute;   bottom: 50%;   left: 50%;   -webkit-transform: translate(-50%,-50%);       -ms-transform: translate(-50%,-50%);           transform: translate(-50%,-50%);   -webkit-box-pack: justify;       -ms-flex-pack: justify;           justify-content: space-between;   z-index: 9; }}


/*Styling the form fields*/
.form-block .field-element {
background: transparent !important;
border: none !important;
border-bottom: 2px solid hsl(66, 22%, 18%) !important;
}

/*Styling field titles*/
.form-block .title {
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
letter-spacing: .05em;
}

/*Styling the smaller titles*/
.form-block .caption {
color: #898989;
}

/*Styling the radio button options*/
.form-block .option label {
  font-family: 'WorkSans-Light' !important; 
font-style: italic;
}

/*Styling the form container*/
.form-wrapper {
background: transparent ;
padding: 30px;
border-top: 2px solid hsl(66, 22%, 18%);
}
.form-wrapper .field-list .title {
color: #7B666A; 
font-family: 'WorkSans-Light' !important; 
text-align: left; 
text-transform: uppercase; 
font-weight: 200; 
font-size: 15pt; 
letter-spacing: .15em !important; 
}
.form-wrapper .field-list .field .caption {
color: #7B666A; 
font-family: 'WorkSans-Light'; 
text-align: left; 
text-transform: uppercase; 
font-weight: 300; 
font-size: 10pt; 
letter-spacing: .15em !important; 
}
.form-wrapper .field-list .description { 
color: #5c5c5c;  
font-family: 'WorkSans-Light'; 
text-align: left; 
text-transform: none; 
font-weight: 300; 
font-size: 12px; 
letter-spacing: 0.02em; 
}


section[data-section-id="5f5d1708d7bf523730ca5ce5"] {
  width: 75% ;
   left:12%;
}
#block-yui_3_17_2_1_1599937606945_14225{
    position : absolute ;
  width : 35% ;
    left : -190px ;
  top : -35% ;
   @media screen and (max-width: 640px) { 
  width:50%;
  left:-25%;
  top:-10%
  }
}
#block-yui_3_17_2_1_1599920270361_29493 {
  @media screen and (max-width: 640px) { 
  width:75% ;
    margin:13% ;
padding :0  }}
#block-yui_3_17_2_1_1599920270361_28812 {
   @media screen and (max-width: 640px) {
     text-align: center
}
}
section[data-section-id="5f5d2d1d02b4ba0be6e6646f"] {
padding-top: 0 !important;
}
#block-yui_3_17_2_1_1599944150653_5875 {
  width : 25% ;
  right:-35%
}

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 0px !important;
    padding-bottom: 10px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.newsletter-block .newsletter-form-button{
font-family: Karin !important;
}
.newsletter-form-field-element {
background: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 1px #F1F1EF !important;
  max-width:75%;
}
.newsletter-block .newsletter-form-field-element::placeholder {
    font-family: 'WorkSans-Light';
  color: #F1F1EF;
  font-size: 14px;
}

.burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun {
    transition-duration: 900ms, 900ms !important;
}

#block-yui_3_17_2_1_1600781897513_16210 {
  @media(max-width:767px) {
    padding:0px
  }}

footer.sections {
section {
    min-height: unset !important;
}
section .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

#block-yui_3_17_2_1_1600766319046_21989 {
   padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* remove white right */
@media screen and (max-width:640px) {
html, body {
    overflow-x: hidden;
}
}
/* remove white right */
@media screen {
html, body {
    overflow-x: hidden;
}
}

#block-912261206451fa951481 {
   width: 75%;
        margin: auto;
  @media screen and (max-width: 640px) {
    width: 75%;
        margin: auto;
  }}

section[data-section-id="5f10521c62abe31aca29e6d9"] {
  @media screen and (max-width: 640px) {
    width: 120%;
    right: 10%
  }}

.sqs-block-newsletter .newsletter-form-field-element {
    @media screen and (max-width: 640px) {
       border-radius: 0 !important;
      }}

#block-yui_3_17_2_1_1600978700492_5215 {
  max-width: 25%;
margin: auto;
   }

section[data-section-id="5f313d5017f1700098f7c91e"] {
margin-left: -50px;
margin-right: -50px;
margin-top : -10px;
margin-bottom: -10px;
  }

.active-tab {
   display:block;
}
.non-active-tab{
   display:none;
}


.header-menu-cta {
  @media screen and (min-width:640px) and (max-width:1050px) {
    display: none;
  }}

section[data-section-id="5f325f5cec1a8c6d00e520c3"] {
  max-width: 85%;
margin: auto;
}

.header-menu-cta a {
    font-family: 'WorkSans';
}

#block-4b948d133f205e02023d {
      @media screen and (max-width: 640px) {
max-width : 74% ;
        margin: auto;
  }}

#block-df358c21ae8ecca27177 {
      @media screen and (max-width: 640px) {
max-width : 70% ;
        margin: auto;
  }}

section[data-section-id="5f5a09bf18cd951327cd3bfa"] .content-wrapper { 
    padding-bottom:0!important;
      padding-top:0!important; 
      padding-left:0!important; 
    padding-right:0!important; 
    overflow-x:hidden !important; 
    max-width: 100%!important; 
  }

section[data-section-id="5f5a09bf18cd951327cd3bfa"] .content-wrapper { 
    @media screen and (max-width:640px) { 
    max-width: 100%!important; 
      top:-20px;
  }}

#block-yui_3_17_2_1_1600766319046_25299 {
    @media screen and (min-width:640px) and (max-width:1050px) {
  top : -50px
  }}

#block-yui_3_17_2_1_1599736206320_8788 {
    @media screen and (min-width:640px) and (max-width:1050px) {
    top : -50px
  }}

div#ninja-elements.ix-block-ninja-custom-faq .accordion__item h4 {
  padding : 5px
}

div#ninja-elements {
  max-width : 75% ;
  margin: auto;
}

div#answer.answer {
  font-family : candara ;
    font-size : 14px !important;
}

.homepage main#page section:last-child .content-wrapper {
    padding-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1600781018787_16286 {
    padding-bottom: 0;
}

.blog-item-title h1 {
    font-family: '' !important;
      font-size: 30px !important;

}

#block-yui_3_17_2_1_1602446009020_7891 {
    top : -35px
}

.sqs-announcement-bar {
p {
     @media screen and (min-width:0px) and (max-width:2400px){  
font-size: 14px !important;
  font-family:;
       
  }
  }
}

.sqs-block.image-block {
 padding: 0px !important;
}

section[data-section-id="5f5a3269c21f38271ec69c21"] {
      border-bottom:1px solid #363824;
}

section[data-section-id="5f1050417e129d0d81a21fb3"] {
      border-bottom:1px solid #363824;
}

#block-yui_3_17_2_1_1612283870632_23746 {
   @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612283870632_33031 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612283870632_40873 {
    @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-fe230dac005d0d277b39 {
    @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-be3c05a5a874b7a8827e {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612266971743_147723 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612266971743_147783 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-80989f6446323d7b75c1 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612266971743_150364 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612266971743_150424 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-05d397d2f98f6d20638e {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612266971743_152060 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612266971743_152120 {
  @media screen and (max-width: 640px) {
max-width : 75% ;
        margin: auto;
  }}

#block-yui_3_17_2_1_1612292408597_22226 {
  position: relative !important;
         max-width : 10% ;
        margin: auto;
         top : -120px;
}

#block-yui_3_17_2_1_1612292408597_22226 { 
  @media screen and (max-width: 640px) {
max-width : 25% ;
    top:-100px
  }}

#block-yui_3_17_2_1_1612283870632_40873 img {
  max-width : 75% ;
  margin: auto;
}

#block-yui_3_17_2_1_1612283870632_33031 {
  max-width : 75% ;
  margin: auto;
}

#block-yui_3_17_2_1_1612283870632_23746 img {
  max-width : 85% ;
  margin: auto;
}

#block-yui_3_17_2_1_1612266971743_147723 {
  max-width :75% ;
}

 #block-yui_3_17_2_1_1612266971743_150364 {
  max-width :75% ;
}

#block-yui_3_17_2_1_1612266971743_152060 {
  max-width :75% ;
}

#block-yui_3_17_2_1_1612283870632_23746 img {
  border: 6px solid #F1F1EF;
}

section[data-section-id="5f5a09bf18cd951327cd3bfa"] {
        border-top:1px solid #363824;
}

#block-yui_3_17_2_1_1612298717970_10760 {
  top : -50px
}

// Move Over Hyperlinks //

h4 a {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

h4 a:hover {
  margin-left: 20px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Menu Block Links //

.menu-block .menu-selector label {
  background: #FFFFFF;
  border-radius: 20px;
  margin: 5px;
  padding: 10px 20px;
  text-decoration: none !important;
}


// Invert Header On Hover //

.header .header-announcement-bar-wrapper {
  transition: filter .5s ease-in-out;
       background-color: rgba(255,255,255,0.5)!important;
}

.header .header-announcement-bar-wrapper:hover {
    transition: filter .5s ease-in-out;
     background-color: rgba(255,255,255,255)!important;
}


//Hide Sections // 
section[data-section-id="5f5cdb9af54b1d69280dc18f"] { display: none !important }
#block-yui_3_17_2_1_1599937606945_14225 { display: none !important }
#block-yui_3_17_2_1_1596555691417_9105 { display: none !important }
section[data-section-id="5f1050417e129d0d81a21fb3"] { display: none !important }
section[data-section-id="5f73869668ebc607d12e27a8"] { display: none !important }
section[data-section-id="5f3264ac61e8321c3c9deb57"] { display: none !important }
section[data-section-id="5f10521c62abe31aca29e6d9"] { display: none !important }


// Hide sections on MOBILE //
section[data-section-id="618d6b0479ad9b2682d3a638"] {
@media screen and (max-width: 640px)
{ display: none !important } }

#block-yui_3_17_2_1_1636662110124_13984 {
@media screen and (max-width: 640px)
{ display: none !important } }

#block-yui_3_17_2_1_1636662110124_29886 {
@media screen and (max-width: 640px)
{ display: none !important } }

#block-yui_3_17_2_1_1637084318301_36443 {
@media screen and (max-width: 640px)
{ display: none !important } }

#block-yui_3_17_2_1_1637085242456_62057 {
@media screen and (max-width: 640px)
{ display: none !important } }


// Gallery Size //

section[data-section-id="618d6da89de7ef0ea9e87fe1"] {
  max-width: 75%;
margin: auto;
}

#block-d3b067ca90e72d7ebf18 {
  @media screen and (max-width: 640px)
  { max-width: 70%;
margin: auto;
  }}

// Scale Up Grid Gallery - Masonry Layout //

.gallery-masonry-item img {
  transform: scale(1) !important;
  transition: all ease-in-out 0.8s !important;
}

.gallery-masonry-item:hover img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 0.8s !important;
}

// Gallery Caption Text //

.gallery-section .gallery-caption p {
  text-transform: normal;
  line-height: 1.4em;
}

// Gallery Caption Background //

.gallery-section .gallery-caption {
  background: #ffffff;
  padding: 30px 0px;
}


/// bold copy text ///
h2 strong {
 font-weight:normal !important;
  font-style: normal !important;
 font-family: 'sourceSerifPro-ExtraLightItalic'; }


// Easy Vertical Text //

@media only screen and (min-width: 640px) { em {
  width: auto !important;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  font-style: normal !important;
}
}

em {
  font-style: normal !important;
}

// Borders //

section[data-section-id="618d6b0479ad9b2682d3a638"] {
  border-bottom: 1px solid black; }

section[data-section-id="61818f66b8a4901bc369612b"] {
  border-top:1px solid black; }

section[data-section-id="618d58cfcf55ec436ba95591"] {
    border-bottom:1px solid black; }

#block-d3b067ca90e72d7ebf18 {
    border:1px solid black; }

section[data-section-id="6193e620fb2c547203b7b683"] {
  border-top:1px solid black;
    border-bottom:1px solid black;

}

// Move socials //

#block-yui_3_17_2_1_1636660738424_5754 {
  @media screen and (min-width:640px) and (max-width:2000px) {
  top:50px;
  }}

// Custom Color Social Icons //

.sqs-use--icon {
  fill: #363824 !important;
}

// Announcement Bar Button //

.sqs-announcement-bar p a {
  display: inline-block;
  text-decoration: none !important;
  color: #000000 !important;
  background: #FAFAFA;
  border-radius: 50px;
  padding: 5px 15px;
  margin: 5px;
}

///// BUTTONS ////////

// Go Arrow Button - Button Padding //

.sqs-block-button-element--small
{
  padding: 10px 20px !important;
    border: 2px solid #363824 !important;
    background-color: transparent;

}

// Go Arrow Button - Arrow Icon Style //

.sqs-block-button-element--small:after {
    content: '➔';
    background-color: transparent;
    border-left: 2px solid #363824;
    padding-left: 10px;
    margin: 0px 0px 0px 20px;
}

// Fade Out Line Buttom - Left To Right //

.sqs-block-button-element--small {
  position:relative;
  height: 20px;
  line-height: 30px;
  text-align: center;
  transition: 0.5s;
  padding: 0 20px;
  cursor: pointer;
  -webkit-transition:0.5s;
    background-color: transparent;
}

.sqs-block-button-element--small:hover {
  background-color: transparent;
  border-color: transparent;
}
 .sqs-block-button-element--small:hover:before{
    transition-delay: .2s;
     background-color: transparent;
}

.sqs-block-button-element--small::before{
  width: 0%;
  height: 100%;
  z-index: 3;
  content:'';
  position: absolute;
  bottom:-1px;
  left:0;
  box-sizing: border-box;
  transition: .2s;
 color: #363824 !important}

.sqs-block-button-element--small:hover::before {
  width: 100% !important;
  transition: .7s;
    background-color: transparent;
}

.sqs-block-button-element--small::before {
  border-bottom: 2px solid #363824;
    background-color: transparent;
}


.sqs-block-button .sqs-block-button-element--small:hover {
 background-color:transparent !important;
 color: #363824 !important
}


// Padding //
@media screen and (max-width:640px) {
.sqs-layout .sqs-row .sqs-block:first-child {
   padding-top: 0 !important;
}
.sqs-layout .sqs-row .sqs-block:last-child {
   padding-bottom: 0 !important;
}
}

// Mobile Images //

section[data-section-id="6193e8ca83e6bb272049f447"] {
  max-width: 75%;
margin: auto;
}

#block-yui_3_17_2_1_1637086336071_11110 {
    max-width: 125%;
}

#block-a16d516c39e9c900d1f2 {
@media screen and (max-width:640px) {
  max-width: 75%;
margin: auto;
  }}


// FONTS //

@font-face {   
font-family: 'sourceSerifPro-Light';   
src: url(https://static1.squarespace.com/static/5f1024b0a7fb9f7c0b79b323/t/6193c1de7692cf3de9fe2d66/1637073375689/SourceSerifPro-Light.ttf); }

@font-face {   
font-family: 'sourceSerifPro-ExtraLightItalic';   
src: url(https://static1.squarespace.com/static/5f1024b0a7fb9f7c0b79b323/t/6193c20d4d1c2624c910cd1f/1637073422097/SourceSerifPro-ExtraLightItalic.ttf); }

h1 {
  font-family: 'sourceSerifPro-Light';}
h2 {
  font-family: 'sourceSerifPro-Light';}
h3 {
  font-family: 'sourceSerifPro-ExtraLightItalic';}
h4 {
  font-family: 'sourceSerifPro-Light';}


@font-face {   
font-family: 'WorkSans-Light';   
src: url(https://static1.squarespace.com/static/5f1024b0a7fb9f7c0b79b323/t/61940c0bcb77a9433ebdfd9e/1637092364038/WorkSans-Light.ttf); }

p {
  font-family: 'WorkSans-Light';}

// Mobile Heading Sizes //

@media screen and (min-width:1920px) and (max-width:3000px) {
   h1 { font-size: 40px !important; }
}

@media screen and (min-width:1920px) and (max-width:3000px) {
   h2 { font-size: 30px !important; }
}

@media screen and (min-width:1920px) and (max-width:3000px) {
   h3 { font-size: 25px !important; }
}

@media screen and (min-width:1920px) and (max-width:3000px) {
   h4 { font-size: 20px !important; }
}

// Mobile Paragraph Sizes //

@media screen and (min-width:1500px) and (max-width:3000px) {
   .sqsrte-large { font-size: 18px !important; }
}

@media screen and (min-width:1500px) and (max-width:3000px) {
   p { font-size: 15px !important; }
}

@media screen and (min-width:1500px) and (max-width:3000px) {
   .sqsrte-small { font-size: 12px !important; }
}

// Mobile Monospace Sizes //

@media screen and (min-width:1500px) and (max-width:3000px) {
   pre { font-size: 12px !important; }
}

// Move Over Hyperlinks //

p a {
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

p a:hover {
  margin-left: 20px;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

// Flipped Image Card Blocks //

@media (max-width: 640px){
  div .sqs-block-image .image-block-outer-wrapper.image-block-v2 {
    flex-direction: column-reverse !important;      
    display: flex !important;
  }
}

// Padding Between Text and Image //

@media (max-width: 640px){
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card {
    padding-bottom: 60px !important;
  }
}

// 1 image mobile masonry //

@media(max-width:767px) {
.gallery-masonry-item {
    width: 100% !important;
    transform: unset !important;
    position: unset !important;
}

.gallery-masonry-item-wrapper {
    height: unset !important;
}

}

section[data-section-id="619d36a79946946c24197c13"] {
  background-color:  ;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:400px;
      display: none !important
    }
  }
}

a[data-active="true"] span.portfolio-hover-item-content {
  color: white;
    font-size: 22px !important;
}

span.portfolio-hover-item-content {
  font-family: 'WorkSans-Light';
  font-size: 18px !important; }

span.portfolio-hover-item-content {
      @media screen and (max-width: 640px) {
        font-size: 18px !important;
      line-height: 0em;
  letter-spacing: 0.1em;} }


section[data-section-id="619d36a79946946c24197c13"] {
  @media screen and (max-width: 640px) {
      top : -40px
  }
}

section[data-section-id="619d4c912a17f12fb3151313"] {
  @media screen and (max-width: 640px) {
      top : -100px
  }
}

/// Portfolio mobile sizes ///
// Chloe //
section[data-section-id="619d4347727e5953887562c0"] {
   max-width: 65%;
  margin: auto;
}
// Wilde //
section[data-section-id="619d42e82e4f843c91deeb6b"] {
   max-width: 65%;
  margin: auto;
}
// Galley //
section[data-section-id="619d36a79946946c24197bdd"] {
   max-width: 65%;
  margin: auto;
}
// Re-burn //
section[data-section-id="619d4a6d4078374e342ce86d"] {
   max-width: 65%;
  margin: auto;
}
// Wilderness //
section[data-section-id="619d4a74a9b55f76eb809c57"] {
   max-width: 65%;
  margin: auto;
}
// Opal //
section[data-section-id="619d4a7ba9b55f76eb809cdb"] {
   max-width: 65%;
  margin: auto;
}
// Greene //
section[data-section-id="619d4b17d18d3f58711549c8"] {
   max-width: 65%;
  margin: auto;
}
// one oat //
section[data-section-id="619d4b8bd0aab31593585232"] {
   max-width: 65%;
  margin: auto;
}


.header-menu-actions, .header-menu-cta {
        display: none !important
}


// Header Go Arrow Button - Button Padding //

.header-actions .btn, .header-menu .header-menu-cta a
{
    padding: 10px 20px !important;
}

// Header Go Arrow Button - Arrow Icon Style //

.header-actions .btn:after, .header-menu .header-menu-cta a:after {
    content: '➔';
    color: #fffff !important;
    border-left: 1px solid #818181;
    padding-left: 15px;
    margin: 0px 0px 0px 15px;
}


// Left Nav Line //

@media all and (min-width:770px){
header nav a{
  display: inline-block !important; 
  float: left;
}
header nav a:hover:after{
  transform: scaleX(1);
  }
header nav a:after {
  display:block;
  content: '';
  border-bottom: solid 1px #232323;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  z-index: 999;
  transform-origin :0% 100%;
 }
}


// Spotlight Navigation Style //

.header-nav-list:hover > .header-nav-item {
  opacity: 0.5;
}

.header-nav-list:hover > .header-nav-item:hover {
  opacity: 1.0;
}

// Spotlight Navigation Folder Style //

.header-nav-folder-content:hover > .header-nav-folder-item {
  opacity: 0.5;
}

.header-nav-folder-content:hover > .header-nav-folder-item:hover {
  opacity: 1.0;
}

// Navigation Links Spacing //

.header-nav-item a {
  margin: 0px 8px !important;
}

.header-actions .header-nav-item {
  padding-right:2.5vw !important; /**change as needed**/

}

.header-nav-list   {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end !important;
      -ms-flex-pack:end !important;
          justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.5vw !important; /**change as needed**/
  }
}

.header-actions--right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}

.header-actions .header-nav-item {
  padding-right:2.8vw !important;//change as needed

}

.header-nav-list   {
  display:flex;
  justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.8vw !important; //change as needed
  }
}

.header-actions--right {
  display:flex;
  justify-content:space-between;
}

.header-display-mobile .header-nav-item.header-nav-item--collection {
display:none;
}


// NEW PORTFOLIO //

section[data-section-id="63865b194a02e4169acd2c8d"] {
   max-width: 85%;
  margin: auto;
  }

section[data-section-id="63865b194a02e4169acd2c8d"]
 .portfolio-grid-basic .grid-item .grid-image .grid-image-inner-wrapper {
  border : solid thin;
  }

Link to comment

 I've add a small piece that seems to do the trick in my testing. (.content-wrapper...)

section[data-section-id="5f5a3269c21f38271ec69c21"] {
  background-color:#F1F1EF;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:400px;
    }
    .content-wrapper {
      padding-top: 300px;
    }
  }
}

Let me know if that addition works.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
5 minutes ago, Ziggy said:

 I've add a small piece that seems to do the trick in my testing. (.content-wrapper...)

section[data-section-id="5f5a3269c21f38271ec69c21"] {
  background-color:#F1F1EF;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:400px;
    }
    .content-wrapper {
      padding-top: 300px;
    }
  }
}

Let me know if that addition works.

No such luck, I'm not sure what has happened from changing the image

Link to comment

Yes, that's very odd, did the image have a different ratio?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
1 hour ago, Ziggy said:

 I've add a small piece that seems to do the trick in my testing. (.content-wrapper...)

section[data-section-id="5f5a3269c21f38271ec69c21"] {
  background-color:#F1F1EF;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:400px;
    }
    .content-wrapper {
      padding-top: 300px;
    }
  }
}

Let me know if that addition works.

 

I've just deleted all the coding past this point just in case I had added something conflicting but it still has the same outcome so it must be to do with this section - is there another perhaps better way of organising the split section for mobile? 

 

Link to comment

Fluid Engine would be a potential option, but I have reservations suggesting that "upgrade" at this point in time.

Was this the coding you were using:
https://www.will-myers.com/articles/split-layout-design-in-squarespace-71

Coding from Will Myers is generally very good, you could try reinstalling it from scratch. Maybe even temporarily hide all of the current CSS so you can confirm there are no conflicts?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
30 minutes ago, Ziggy said:

Fluid Engine would be a potential option, but I have reservations suggesting that "upgrade" at this point in time.

Was this the coding you were using:
https://www.will-myers.com/articles/split-layout-design-in-squarespace-71

Coding from Will Myers is generally very good, you could try reinstalling it from scratch. Maybe even temporarily hide all of the current CSS so you can confirm there are no conflicts?

Perfect thanks! It worked when I reinstalled - the classic off/on!

Thanks for your help on this!

Link to comment

No problem, glad to have helped!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 1 month later...

I noticed this change on my site as well, using the same CSS from Will Myers. For anybody having this same issue, it seems like squarespace changed

.section-background

to

.section-border

This has been reflected on Will Myers' tutorial linked above, which is why "reinstalling" it will fix the issue. You could also replace all.

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.