Jump to content

Postcard image block in footer. Center title on mobile view.

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.thesoaresprotocol.com/

Hi everyone!

So I have a logo and a copyright disclaimer in my footer. I explored a few options and found the best way to implement those was to use a postcard image block. 

Only thing is:

1. There is this weird background in the image block. You can see the differences in color and I'm using a transparent PNG logo. I'd like to remove that background color because it will hurt the users' eyes and confuse them.

2. On mobile view, the disclaimer (which is part of the image title block) is not centered right. Is there a way to fix that as well?

Thank you for your assistance!

Link to comment
  • Solution

#1. You can adjust it in Design > Site Styles or add this to Design > Custom CSS

/* Remove image overlay color */
.image-overlay {
    background-color: transparent !important;

#2. Use this CSS

/* Mobile Footer Image */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1657330122456_4698 * {
    text-align: center;


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

I was not aware you could change those parameters through Design Styles, thank you so much! I was able to center the text but...

...I tried the CSS code for the overlay color and now it is white instead. I checked my image, it's still a transparent PNG. 

Edited by A1Protocol
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.