Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Zara

Problems with image display in first sections 7.1

Recommended Posts

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!

Share this post


Link to post

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

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.

Share this post


Link to post

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!!

Share this post


Link to post

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?

Share this post


Link to post

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? 

Share this post


Link to post

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,

Katherine S.

Share this post


Link to post

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
Posted (edited)

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.  

 
1) Place a new Image Section between the Header and current Image Section. (I’ve tried with a Blank Section, but did not achieve consistent results—for some reason the Image Section worked every time.)
2) Set Section Height to minimum-10.
3) Delete the default background image. 
4) Set background color of the new Image Section to match the background of the Header — or use CSS as indicated below. 
5) Delete the spacer that may show up in the center of the section. 
6) Obtain this new Section’s section-id and its empty Text block-id. 
7) Inject the following CSS into the page’s advanced settings, incorporating the appropriate section and block ids from step 7 above. 
 
<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>

 

Edited by thaitandem
typo

Share this post


Link to post

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

 

Share this post


Link to post

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!

Share this post


Link to post

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.

Share this post


Link to post

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 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...