Jump to content

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

By A1Protocol, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

A1Protocol Level 5

A1Protocol

Posted
Posted

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
  • Replies 3
  • Views 165
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

#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 t

A1Protocol
A1Protocol

Actually, I found a filter in the image editor and I like the outcome. Thank you!

  • Solution
tuanphan Level 17

tuanphan

Posted
  • Solution
Posted

#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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
A1Protocol Level 5

A1Protocol

Posted
  • Author
Posted (edited)

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources