Adding two logos with clickthrough URL to footer using CSS

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.

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.

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

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

Hi @tuanphan I will add the two images now.

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.

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.

Hi. Can you share site url?

@tuanphan

marlin-gecko-mcny.squarespace.com

Password: 123456789!

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)

Hi @tuanphan it has just been extended through customer support.

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;
}
}

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

21 hours ago, TimBowman said:

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

The code runs on mobile only.

You want run on mobile or both desktop  + mobile?

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

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?

Hi @tuanphan, I am wanting to have the bottom two logos in the same sizing and positioning as the logos above it in the attached image.