Cadel
-
Posts
43 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Cadel
-
-
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?
-
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
-
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
-
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;
} -
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, Ziggy said:
Can you share your website URL?
Of course - https://www.cthomasdesignstudio.com/
-
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?
-
19 hours ago, Ziggy said:
Yes...well almost! I am working on developing a solution similar to this for a client at the moment, it'll need the bar coding in HTML and a piece of javascript and CSS to make it work.
Oh nice! I'd be interested to know how you achieved it once you're done if that would be okay!
-
Site URL: https://www.honeyandcocreative.com/
Hi, I really like the attached header/nav - any idea on how this would be achieved?
-
Hi @tuanphan,
It's basically this - https://www.squarestylist.com/shop/horizontal-scrolling-gallery-squarespace. But obviously I'm looking for the code myself.
Any help would be great.
Many thanks,
17 hours ago, tuanphan said:Hi. Do you have an example?
-
Hi,
I want to include a horizontal scroll carousel into my website. Is there any way to do this with css and js?
Many thanks,
Cadel
-
Site URL: https://nayatraveler.squarespace.com/journeys-peru-walking
Hi,
I'm looking to develop my site to have a fixed split section at the very top but I'm unsure how to go about this?
Any help would be appreciated!
Cheers,
Cadel
Need help with layout
in Customize with code
Posted
Perfect thanks! It worked when I reinstalled - the classic off/on!
Thanks for your help on this!