Jump to content

Why are there different footer formats on different pages?

Recommended Posts

My site isn't live yet, as I don't want to launch with the issue that I'm experiencing. The layout of my footer is different from page to page. I thought that when you created a footer on the Home page, that footer was the standard across all pages on the site, unless otherwise designed. 

Attached are two screenshots - one that illustrates the footer that we'd like to have (once we can figure out how to vertically align the logo with the text) and the other, from the Contact Us page, that shows the text centered in the section. When we open the text block, we're unable to left justify the text so that the format looks like the Home page footer.

The only custom CSS that I have on the site is to bring the footer text closer together and resize our logo. 

This is what's currently in the Custom CSS field.

p {
 margin-top: -30px !important;
}
.image-block {
    transform: scale(0.65);
}
}

Any suggestions on how we can tackle this issue would be great! 

Screen Shot 2021-03-08 at 5.08.09 PM.png

Contact_Page_Footer.png

Link to comment

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
Quote

The layout of my footer is different from page to page. I thought that when you created a footer on the Home page, that footer was the standard across all pages on the site, unless otherwise designed.

This is true. What you've done on the pages where the footer is centered is the unless otherwise designed. For example the Services page. There is a Markdown block with code similar to the following.

1053375925_ScreenShot2021-03-09at5_36_30PM.thumb.png.15c154d52fbe3acd89ebbd5cdfeabb9a.png

That code is using a div selector which is very general and is trying to target all the divs in the page. Removing the Markdown blocks will resolve the footer issue. But you'll probably need to fix some other alignment issues. I suggest using SS built-in features where possible.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Amazing! Thank you for your patience, @creedon. I successfully replaced the markdown blocks on those pages with standard text blocks and the footer snapped back to normal.

Any suggestions on how to get the top of the footer image to vertically align with the top of footer text? I suspect there's some inner padding built in to the SS image blocks, but haven't found a CSS workaround.

Link to comment
Quote

Any suggestions on how to get the top of the footer image to vertically align with the top of footer text?

Yes. In Design > CSS you have the following.

footer .image-block {
    transform: scale(.65);
}

Replace with with the following.

footer .image-block {

  width : 50%;
  
  }

The scale, scales on a center point. In other words it shrinks to a center point of the image, leaving space around.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...
On 3/11/2021 at 10:58 AM, PegasusRDM said:

Thank you @creedon! That looks great. 

Is there any way to bring the text block closer to the image from the left so that there's not as much space between the right side of the image and the left side of the text?

Hi. Have you solved this yet?

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

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.