Problems with image display in first sections 7.1

I'm really struggling to get an image to display properly in the first section of a page in 7.1.  If I add the image to any section below the first section, it will display properly. 

The first section on each page appears to have a shorter height, I guess because of the site header. But I can't seem to find any combination of image sizing that won't cut off the top of the image when it displays.

I have the section height set at 100%. I've dragged the focus dot up to the very top of the image.  I've resized, cropped, and re-loaded at least a dozen variations of image sizes and nothing is working.

The image is full bleed, so I have it set on the long edge at 2500px, but no matter how much I crop the height, it still cuts off the top and just enlarges the image to fill the space. It's maddening. 

Is there a page header code injection I can use to properly display the image in this section? 

And does anyone know the ideal proportions for full-bleed images in this first section? Or the actual dimensions of this section?

Thanks!

Can you share link to your site? I can take a look

Following!! I am having the exact same issue here, it is so frustrating. 

The only trick I have found was to add a blank section with no content, and make it the lowest height possible.  I am using a solid colour fixed header though so I was able to make the background that colour and it matches my Header. Basically because there is no content it kind of disappears when I view the site but it means the next section background image fits the section perfectly.  

I would love to know if there is code that I can use to have Full Bleed image align at the top of the actual section and not up underneath the header.

Here's a link:

https://zarashea.com/nsj9bk8

In the first section, you can see that the top of the image is cut off. No matter what height I crop this image to, Squarespace cuts off the top when it displays. Currently, this image is 2500x1300px. I've tried cropping it to heights as low as 1000px. Nothing works. It just enlarges the image and cuts off the top!

In the second section is the identical image. It displays properly at the full height. 

In the third section is the image at its original size of 3600x2400px.  This was my first variant when I was going to use a transparent site header (which I had to ditch because the nav wouldn't fit).

This must have something to do with the height restrictions on the first section but I can't figure out through CSS or HTML how to force it to display at full height. Or perhaps there is some magical image size that will work.

Thank you for any help!!

I've got exactly the same problem and am using NovaMae's workaround (thanks!). There's gotta be a more elegant solution though… Any ideas?

I've got the same problem using 7.1. Even trying a brand new site demonstrated this behavior.  I'm using CSS to add a top margin to that Section ID to account for the space absorbed by the header. A far from perfect hack as different screen resolutions render the height of the header differently, so need to target them specifically. Those in the know must have far more elegant solutions to offer, to what must be a known problem within Squarespace? 

Got a quick response back from Squarespace...

Hi there, 

Greetings from Portland, Oregon. Thanks for writing in to Squarespace Customer Support! 

I've gone ahead and read through for article you linked as well as checked out your site and I can see what you mean. At this point in time the behavior that you're seeing is expected and we mention that a header with a solid background color will cover some of your image here:

https://support.squarespace.com/hc/en-us/articles/360000667707#toc-header-background

In the meantime what I can do is submit the option to not have the header overlap some of the image as a feature request to our Development Team for you. We can't guarantee that each suggestion will be implemented, but each one is reviewed by the team and we do appreciate the feedback.

Moving on, if you don't want to have your solid background header overlap your first image you might consider using custom code to resolve this. That being said, be aware that due to their complex nature, we're unable to offer assistance or troubleshooting for code modifications or additions. These types of modifications may cause unwanted results when interacting with our platform, templates, or updates we release. This guide is an excellent starting point: 

https://support.squarespace.com/hc/en-us/articles/205815928

If you're looking for an option that won't require code, I'd recommend giving the work around that NovaMae mentioned which includes adding a blank section with no content above you full bleed image and setting it to the lowest height possible. From there you can add a background color that matches your header and that can help push that content down so it's revealed in full.  

I hope this information helps!

Cheers,

If you need custom code to solve this, just share link to page on this forum, we will check carefully.

In case it may be of use to others, here is what I, a novice, is now doing to remedy the problem—gaining the full height of the image below the Header, with no extra space between the Header and Image Section below. It’s a modification of Zara’s approach with some modified CSS @tuanphan offered from another thread.  

<style>
[data-section-id=“XXXXX"] {
    min-height: 1vh !important;
}

[data-section-id=“XXXXX"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background-color: /*your color*/ !important; /*optional to match Header background if not set in step 5 above*/
}

#block-XXXXX {
  padding: 0px !important;
  font-size: 1px !important;
}
  </style>

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 

1) Add new Blank Section between Header and Image Section. 

2) Set this new Section's Height to its lowest value: 10. 

3) Capture Section ID. 

4) Insert the code below with the Section ID into the page's Advanced Code Injection. 

[data-section-id="Your Section ID"]>.content-wrapper {
  height: 0 !important;
  padding: 0 !important;
}

That may work for other pages but it is not possible in the static Blog setup.  Has anyone solved the image cuttoff problem?  Without using code? Thanks!

I’m glad this isn’t just me!! Honestly this has been driving me crazy and may well keep me on 7.0 😡

Thanks so much for this fix!
It was driving me crazy too and I wasn't sure if the cropping of the image because of the header was just happening to me.
It's very frustrating and was taking me so much time to figure out. Glad I found a solution for now here!

Hopefully the Development Team will create the option to not have the header overlap some of the image in the future.

Has anyone found a solution on this? I've tried @thaitandem's solution and it didn't work.

The fact that there isn't even an option to choose whether the header overlaps the banner/image in the first section drives me crazy. And I've noticed all the templates do the same thing 

This is driving me nuts too. No option to just have a background image on the header without adding a section below, which then messes the height up. 

Hi, this was bugging me too for such a long time! After playing around for a while though, I've managed to obtain useful and consistent results suitable for my purposes so maybe it will help others too? It's super simple, and adjustable too:

Add the following code to the custom CSS section:

#page .content {
  padding-top: 10vh;
}

This will cause contented to move down on EVERY page, regardless of first section type. The background image of the first section (if applicable) will also reposition itself accordingly, and the good part is that the "10vh" will be responsive across all devices (you can increase or decrease this depending on your needs).

Hope this helps as a temporary workaround!

How we doing on this headache?

I tried Jmaliisononline suggestion by adding the custom CSS section with "10vh", and although it works, I feel like there is too much gap between the header and the first image. 

This seems like an easy fix by squarespace...not sure why they haven't fixed this. 

15 hours ago, payamd said:

How we doing on this headache?

I tried Jmaliisononline suggestion by adding the custom CSS section with "10vh", and although it works, I feel like there is too much gap between the header and the first image. 

This seems like an easy fix by squarespace...not sure why they haven't fixed this. 

Can you share site url? We can help easier

I've made several websites using 7.1 and am experiencing the same thing on each site, across all devices. When I visit the sites, the tops are cut off. In every case, when I refresh the pages, they correct themselves. The two examples attached show the sites when I first visit them, then again after being refreshed. Unfortunately, users who visit these sites for the first time won't know to refresh the pages in order to see them correctly, and that is not going to work.

This is a new development on my end. The two sites I'm using as examples were created months ago, and both were performing perfectly until a week ago (URLs below). Sure hope Squarespace is working on a fix for what is by now a well-documented issue.

www.christysellstampa.com
www.tamparepro.com

On 12/17/2020 at 9:51 PM, juliaprather said:

I've made several websites using 7.1 and am experiencing the same thing on each site, across all devices. When I visit the sites, the tops are cut off. In every case, when I refresh the pages, they correct themselves. The two examples attached show the sites when I first visit them, then again after being refreshed. Unfortunately, users who visit these sites for the first time won't know to refresh the pages in order to see them correctly, and that is not going to work.

This is a new development on my end. The two sites I'm using as examples were created months ago, and both were performing perfectly until a week ago (URLs below). Sure hope Squarespace is working on a fix for what is by now a well-documented issue.

www.christysellstampa.com
www.tamparepro.com

Have you solved this yet?

I'm SO glad to finally find that other people, far more techy than me, are also struggling with this.  I thought I was just too beginner to figure this out.

My website is www.carlywilloughbyrolls.com.au and I've tried both code injection options listed above but they didn't work for some reason the blank or image section I inserted stayed displaying at the size 10 height and I don't want that much of a gap between my header and first image.

Any ideas?

On 5/17/2021 at 4:42 PM, Starly said:

I'm SO glad to finally find that other people, far more techy than me, are also struggling with this.  I thought I was just too beginner to figure this out.

My website is www.carlywilloughbyrolls.com.au and I've tried both code injection options listed above but they didn't work for some reason the blank or image section I inserted stayed displaying at the size 10 height and I don't want that much of a gap between my header and first image.

Any ideas?

Hi. It looks like you solved this?

Use a gallery block instead of an image or headline block. Just put one image in the gallery, and hide the arrows. The gallery block starts right below the header, unlike the image and headline blocks, which slip underneath the header. (You can see the "missing" part of your image or headline block by setting the header to transparent.)

I'm currently having this issue with Flatiron (which I believe is 7 and not 7.1) I just contacted support and they said it's a 'known issue' and there currently isn't any fix. I'm not able to add a white spacer, which I thought might help, and the codes other people have suggested in this thread aren't working for me. Was wondering if anyone else has found any new solves? 

Has anyone figured this out. 

You have the top section being hidden under the navigation if you dont want it to be transparent and it makes the image cut off. 

Would love how to do this on only one page, I am assuming that it is a data section on that pages code injection that the code can go into. 

I dont know what code to put in I have tried padding-top and margin top and neither are working.