SKPhotography

@Ziggy Thank you for checking! It is bizarre ... must be an issue with my laptop. 

@Ziggy www.daisyave.co

Hello, 

I just launched my site. Prior to publishing, I had noticed that the grey color background I chose would change color or color block as I scrolled down the screen. I thought it may work itself out once launched, but I am seeing it post launch. 

Can anyone advise? Is it the specific color I chose for the background that it difficult to load properly? 

Hello,

I was hoping to get some help with this break point issue I'm experiencing. I have added custom code to make the navigation split on either side of the centered logo and this has given me some problems with the breaking point on smaller screens. What code could I add to fix this issue? 

As always, thank you for the help!

Hello group, 

I was wanting to make the break point so that the below doesn't happen, targeting only the site navigation not anything else on the site. Is this possible? 

Thanks!

Hello @tuanphan

I'm experiencing something similar as well. I've copied my code below. Any help is greatly appreciated!

________

//CUSTOM FONTS//

@font-face {
font-family: RomieItalic;
src:
url(https://static1.squarespace.com/static/63bae38b46f01e03b915fa2c/t/64161d7c58a10453d6480ef2/1679170940526/RomieTrial-Italic.otf);
}

@font-face {
font-family: Agrandir;
src: url(https://static1.squarespace.com/static/63bae38b46f01e03b915fa2c/t/63bc79fa4bee0a7daec2dc38/1673296378202/PPAgrandir-Regular.ttf);
}

@font-face {
font-family: Bradford-Light-Italic;
src: url(https://static1.squarespace.com/static/63bae38b46f01e03b915fa2c/t/63f519f34aec2c4f002794b8/1677007347169/BradfordLLWebTrial-LightItalic.woff2);
}

//HIERARCHY FONT CHANGES//

h1 {
font-family: 'RomieItalic';
}

h2 {
font-family: 'Bradford-Light-Italic';
}

h3 {
font-family: 'Bradford-Light-Italic';
}

h4 {
font-family: 'Bradford-Light-Italic';
}

p {
font-family: 'Bradford-Light-Italic';
}

//PORTFOLIO PAGES//

h3.portfolio-title {
    font-family: 'Bradford-Light-Italic' !important;
}

.item-pagination-link .item-pagination-title {
  font-family: 'Bradford-Light-Italic';
}

.item-pagination-link .item-pagination-icon svg {width: 10px;
}

//HEADER NAVIGATION//

.header-nav, nav.header-menu-nav-list {
    font-family: Agrandir;
}

.header-title-logo img {
    visibility: hidden;
}
.shrink .header-title-logo img {
    visibility: visible;
}

@media only screen and (min-width:768px) 
div#BLOCK-.header-title-logo>.sqs-block-content:first-child {
   display: visible!important;}

//HIDDEN ON MOBILE//
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1678742635296_50065 {display:none;
}

.sqs-block-button .sqs-block-button-element--small {font-family: Agrandir !important; color: #212E21!important;   font-size: 25px !important;   letter-spacing: 0.01em !important;   line-height: 30px !important; 
}  

.sqs-block-button .sqs-block-button-element--small: hover {opacity: .98;
}

@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1673198424087_6401 display: none;
}

@media screen and (max-width:767px)
div#block-yui_3_17_2_1_1673203832010_12702 h1{
    font-size: 40px;
}

@media only screen and (max-width: 768px) {section[data-section-id="63bb0e66f0927a3da71b10c7"] {display: none;
}

.item-pagination-title:before {
  content: "\2192";
  float: right;
  padding-left: 30px;
}

.item-pagination-icon {
  display: none;
}
    
.header-nav-folder-content{border: 1px solid black
}

.header-nav-folder-content{box-shadow: 2px 2px 10px rgba(0,0,0,0.25)
}

//Image Layout on Mobile//

@media (max-width: 800px) 
{flex-direction: column !important;
.intrinsic, .image-card-wrapper {width: 100% !important;}

.form-wrapper .field-list .field .field-element {
  background-color: transparent;
  border: 1px solid #194027;
  border-radius: 0;
}

//BORDERS//
  
section[data-section-id="63bb0e66f0927a3da71b10c7"]
{border-bottom: 1px solid black;
 border-top: 1px solid black;
 }

div#block-e42baeb5cc32bfcd1dd0 {
    border-left: 1px solid black;
}

@tuanphan Not 1:1 or one standard overall aspect ratio - only the original ratio of the image, for instance what aspect ratio the image was photographed in. I have a variety of image aspect ratios (4:5, 16:9, 2:3) in both horizontal and vertical orientations. 

Essentially, I'm looking for code that won't allow Squarespace to change the aspect ratio at all. 

@tuanphan works great but it didn't keep the bottom border on scroll, should I just add "border: 1px;" somewhere?

Hello all, 

I'm trying to change all navigation items (nav links, logo, social icons, button, border, etc.) text color on scroll ideally at 2s-4s or 25% down the page ONLY on the homepage.

Any CSS help is greatly appreciated!

Link: https://mandarin-parsnip-nj7c.squarespace.com/config/

Password: OreoCookie

@tuanphanThank you! But the images look to be cropping to 16:9 - was there a way to change the code to retain the original aspect ratio?

@tuanphanthe page shown in the link, "portfolio-1"

@tuanphanit's working now, sorry about that!

@tuanphanhere is a link to the page I would like to retain original image aspect ratios using the grid overlay portfolio template https://www.skphoto.co/portfolio-1

Hello @tuanphan, I would like access to the same code as @justinliif possible - original aspect ratio for images in "Grid : Overlay" section on a portfolio page.

Thank you!