Need help with layout

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?

Can you share your website URL?

2 minutes ago, Ziggy said:

Can you share your website URL?

Of course - https://www.cthomasdesignstudio.com/

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

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

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

 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.

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

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

18 minutes ago, Ziggy said:

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

Quite possibly, I've reverted the image and tried other images and still getting the same outcome now - I may have to re-do it 

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? 

 

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?

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!

No problem, glad to have helped!

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.