ErikaT

Site URL: https://www.erikatanithphotography.co.uk/

Hi,

I wonder if anyone could help?

The very first image on my homepage (the top image that sits beneath my header) is loading lazily as it looks to be the default for all background images in squarespace. This means when I run pageinsights I get the error:

"Largest Contentful Paint image was lazily loaded. Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint."

Is there a way to force just this one particular image to NOT load lazily?

Thanks in advance if anyone can shed any light,

Erika

Hi there,

Can you provide a link to your website and the page in question.

Hi,

Sure, with the below (enclose the below in your 1024px media query if you want the rounded effect etc on mobiles/tablets only). You may need to adjust your logo padding slightly again after this 🙂

.header-actions-action--cta a {
border-radius: 5px;
padding: 0.8em 0.8em !important;
}

Hi,

I edited one of @tuanphan responses to a similar query, with some tweaks for your setup:. Tuan is the expert, I'm still learning 🙂

@media screen and (max-width:1024px) {

/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
          width: 10% !important;
}

/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
}

.header  .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title .header-mobile-logo {
    padding-right: 0px;
    padding-left: 10px;
    }

Or if just the login link then:

 .header-menu-nav-item a[href="#"] {
    font-size: 18px!important;
}

And then the below to remove the lines:

.header-menu-nav-item a {
    background-image:none !important;
}

Hi,

Try:

 .header-menu-nav-item a {
    font-size: 18px!important;
    background-image:none !important;
}

Hi,

We'd need the password to your site to confirm the coding/positioning.

Also how would you want it displayed: BURGER | LOGO | BUTTON?

Thanks, Erika

I had to take my header code injection out, save it > confirmed it was then working.

Put the code back in, saved it > and now its working again. 🙂

Working in squarespace for me but not mobiles. hopefully not long 🙂

Hi,

I've just been talking to SS live chat , same issue on my 7.1 site: https://www.erikatanithphotography.co.uk/

It's a known issue they are currently investigating apparently. No timeframe for resolution as yet, but told me to keep an eye on: https://status.squarespace.com/

You could also get rid of the earlier css to cut down on multiple entries and combine them:

.header-nav-item a[href="/easter"], .header-menu-nav-item a[href="/easter"] {
  color: #5c4255 !important; 
  font-weight: 1000;
}

Hi there 🙂

You could try:

.header-nav-item a[href="/easter"], .header-menu-nav-item a[href="/easter"]
 {
    color: #5c4255 !important; 
}

I'm glad it helped 🙂

And if you wanted your footer full width:

#footer {
  background: #F1ECC2;
  max-width: 100%;
}

Ah okay is:

footer#footer {
    background: #F1ECC2;
}

Hi, have you got a link to your site, I assume you're using a 7.0 template?

Thanks! Erika

Hi,

Try:

.header-nav-item:nth-child(1) {
font-weight: 700;
}

Hi, you can do it just by editing a page, scrolling down to footer, and editing the footer block. Then select colours and a colour from your colour themes.

Or, if you want a different colour to what's in your colour themes then add the below custom code if you have a 7.1 template:

footer,
footer *
 {
 background-color: green!important;
}

Replacing green with whatever hex colour you want: https://htmlcolorcodes.com/

Or do you have a 7.0 template?