Jump to content

-Adjusting position of homepage image

Recommended Posts

On 8/22/2020 at 12:45 PM, HairyStories said:

the header is cutting off the head of my image

Have you tried to adjust the image's focal point?

set-focal-point.thumb.gif.a198beb408300a37e093f58b41f6af43.gif

 

Edited by paul2009
Screenshare video had disappeared

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
20 hours ago, HairyStories said:

Seems the image is taking the full page and getting covered up by the header

I didn't notice the solid header 🙂

The section background (banner image) normally sits behind the header, but when the header is solid instead of transparent, it obscures some of the image. You should be able to lower the image using some CSS, but note that the header height changes with the screen width, so you may need to compromise on the exact position. For example (add to Design > Custom CSS):

.homepage .section-background:first-of-type {
  top: 110px
}
.homepage .header {
  min-height: 110px!important;
  background: #000;
}

Notes:

  • The code shifts down the background image in the first section.
  • Ths code is specifically aimed at the homepage only.
  • The code assumes a black (#000) header.
  • It shifts the image down by 110 pixels.
  • This is only for Squarespace 7.1 templates.
Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

BTW: I wonder if you might have a suggestion for my other homepage problem:  My site logo image is tiny (top-left 'Hairy').  When I make it taller, it makes my header much taller.  I adjusted the logo height, but it seems there's some sort of buffers or margins within the header that are making higher than I want.  Sort of like 'margins' in a document.  I'd like to slot my logo in there with minimum margins above and below it (i.e. without having to make my header taller).  Any advice would be much appreciated! 

Link to comment
3 minutes ago, HairyStories said:

Is there something i can do to show my appreciation?

circle-like.png.fe4e63eb68a4a8a5ba437375ad917ecf.png.65b64a1eddf421c82d7df99435846a43.png

Clicking Like, Love or Thanks in the bottom right corner is enough 🙂

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
7 minutes ago, HairyStories said:

When I make [the site logo] taller, it makes my header much taller.  I adjusted the logo height, but it seems there's some sort of buffers or margins within the header that are making higher than I want. 

There's something called "padding" around the logo that changes according to the width of the site. You can reduce this to a specific amount (for example 17-pixels) using the following CSS. I've also added a line to set the height of the logo, but you could adjust this using the built-in controls instead.

.header .header-announcement-bar-wrapper {
    padding-top: 17px;
    padding-bottom: 17px;
}
.header-title-logo img {
    max-height: 86px;
}

spacer.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 2 months later...
21 hours ago, freelancervillepalmu said:

Hey Paul! Thanks for the code above to move the header image 110px down. I put it on my site but it seems to affect ALL the elements on the front page (including even footer). What went wrong? I'd like to target only the first image (section, image as a bg) and move it down so it is not covered by the menu.

Can you share site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/12/2020 at 1:00 PM, tuanphan said:

Can you share site url? We can help easier

Thanks for the quick reply. Unfortunate I cannot share the site yet (it is still unpublished). The code above fixed the problem - first section bg image on the home page is moved down and no more clipped by the navigation. BUT it also messed up all the sections below. All content is moved xx px down and for example the content on my footer is now clipped by the section.

How do I edit the code so it affects ONLY the first image on the homepage? I'm using the newest Squarespace with no custom code.

Edited by freelancervillepalmu
Link to comment
4 minutes ago, freelancervillepalmu said:

Can I reach you via email? I do not feel comfortable posting an unfinished site on a public forum.

You can use link in the signature

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...

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.)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.