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

Adding two logos with clickthrough URL to footer using CSS


TimBowman

Question

I have added a singular image with two logos to the footer of my website using css, as I was having difficulty adding the logos as images in the footer as the sizing was far too large for the footer.  I used the below code to add the logos:

.Footer {
  position: relative;
}
div#block-4429c755fc8f16911bc3 p:after {
   content: "";
   display: block;
   background-image: url(https://static1.squarespace.com/static/60f00f33d833301a6b9aa6b3/t/60f00fb7d833301a6b9abe80/1626283113641/sustainability.png);
   background-size: cover;
   width: 140px;
   height: 80px;
   margin: 0 auto;
   margin-top: 30px;
}

I am now wanting to add the logos as two separate images with a clickthrough URL for both, what would be the best way to make sure they are both centered but not overlap one another and the css for adding a clickthrough url? (The logos I am refering to are the Bcorp & Ecologi logo at the bottom of the footer) Image attached.

Screenshot 2021-07-23 at 12.01.59.png

Link to comment

15 answers to this question

Recommended Posts

  • 0

Hi. Why dont you use Image Blocks?

On 7/23/2021 at 6:08 PM, TimBowman said:

I have added a singular image with two logos to the footer of my website using css, as I was having difficulty adding the logos as images in the footer as the sizing was far too large for the footer.  I used the below code to add the logos:

.Footer {
  position: relative;
}
div#block-4429c755fc8f16911bc3 p:after {
   content: "";
   display: block;
   background-image: url(https://static1.squarespace.com/static/60f00f33d833301a6b9aa6b3/t/60f00fb7d833301a6b9abe80/1626283113641/sustainability.png);
   background-size: cover;
   width: 140px;
   height: 80px;
   margin: 0 auto;
   margin-top: 30px;
}

I am now wanting to add the logos as two separate images with a clickthrough URL for both, what would be the best way to make sure they are both centered but not overlap one another and the css for adding a clickthrough url? (The logos I am refering to are the Bcorp & Ecologi logo at the bottom of the footer) Image attached.

Screenshot 2021-07-23 at 12.01.59.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/25/2021 at 2:59 PM, TimBowman said:

Hi @tuanphan the size of the logos was far too big using image blocks.

Hi. You can use Image Blocks, then we will give the code to make it smaller

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi @tuanphan I figured out how to reduce the image size, however now the border of the images are still large and wont allow me to place them next to one another, essentially I want the image blocks to be placed the same as the logos above them. I tried using spacers and playing with the margins but no luck.

Screenshot 2021-07-27 at 17.02.45.png

Link to comment
  • 0
On 7/27/2021 at 11:04 PM, TimBowman said:

Hi @tuanphan I figured out how to reduce the image size, however now the border of the images are still large and wont allow me to place them next to one another, essentially I want the image blocks to be placed the same as the logos above them. I tried using spacers and playing with the margins but no luck.

Screenshot 2021-07-27 at 17.02.45.png

Hi. Can you share site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
23 hours ago, TimBowman said:

@tuanphan

marlin-gecko-mcny.squarespace.com

Password: 123456789!

Your site is expired. You can contact Squarespace Customer Care to extend it (free)

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/29/2021 at 4:17 PM, TimBowman said:

@tuanphan

marlin-gecko-mcny.squarespace.com

Password: 123456789!

Add to Design > Custom CSS

/* Mobile footer logos */
@media screen and (max-width:767px) {
div#block-4429c755fc8f16911bc3+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-4429c755fc8f16911bc3+.row .span-6 .image-block {
    width: 50% !Important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
21 hours ago, TimBowman said:

Hi @tuanphan, above code has not changed the layout of the bottom two logos.

Screenshot 2021-08-02 at 13.22.16.png

The code runs on mobile only.

You want run on mobile or both desktop  + mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
22 hours ago, TimBowman said:

Ah I see, desktop & mobile would be ideal if possible.

Hi. On desktop, you want to make them smaller + closer? Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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