Is it possible to add a small logo to the footer on the forte, or any other, theme?

12 hours ago, CeceliaFoley said:

Hello @tuanphan! Looking for help to add a logo to my footer, in between contact info and a rights statement. Having a hard time getting the logo to populate. Possible to take a look? Thank you!

Can you share site url? I can check easier.

On 8/28/2020 at 6:01 PM, tuanphan said:

This code for Mobile

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1598449969616_5311 img {
	width: 20px !important;
}
}

 

Thank you very much one more time! Best regards 🙂

@tuanphan any chance you could help me do something similar? I've added a small logo to my footer with blocks and spacers but its gotten way bigger on mobile

22 hours ago, melrose1190 said:

@tuanphan any chance you could help me do something similar? I've added a small logo to my footer with blocks and spacers but its gotten way bigger on mobile

Can you share link to your site? We can help easier

Hi @tuanphan!

You helped me previously with the global footer logo.

I took the code and added it to my homepage, to add a logo to the intro statement. Do you mind taking a look to see if I used the proper syntax?

The page is: https://www.rgrayphotography.com/

It looks good on desktop, but on mobile I am thinking maybe it should be smaller. Any suggestions?

The code I used is below.

Thank you!! 🙂

/*INTRO LOGO*/
div#block-5efec5cc1ccde6142b8d8dd9 p:before {
   content: "";
   display: block;
   background-image: url(https://static1.squarespace.com/static/5ee66005f0c8950313959a58/t/5ee66760dd4fcc494813ec36/1592188125298/);
   background-size: contain;
   width: 50px;
   height: 50px;
   margin: 0 auto;
   margin-top: 0px;
    position: absolute;
    left: 100;
}

On 1/27/2021 at 8:17 AM, rGRAYphotog said:

Hi @tuanphan!

You helped me previously with the global footer logo.

I took the code and added it to my homepage, to add a logo to the intro statement. Do you mind taking a look to see if I used the proper syntax?

The page is: https://www.rgrayphotography.com/

It looks good on desktop, but on mobile I am thinking maybe it should be smaller. Any suggestions?

The code I used is below.

Thank you!! 🙂

/*INTRO LOGO*/
div#block-5efec5cc1ccde6142b8d8dd9 p:before {
   content: "";
   display: block;
   background-image: url(https://static1.squarespace.com/static/5ee66005f0c8950313959a58/t/5ee66760dd4fcc494813ec36/1592188125298/);
   background-size: contain;
   width: 50px;
   height: 50px;
   margin: 0 auto;
   margin-top: 0px;
    position: absolute;
    left: 100;
}

 

It looks like you solved?

Hello 

I'm struggling with adding the logo centered on the footer.

Been trying some tips with spacer block but it's not working.

Can someone help me please to fix this with some CSS code? 

Thank you so much 

link to website : https://racontemoi.squarespace.com/

password : MRCbst2020

@ElizabethM

You can get close with just the SS interface.

Please see the following...

Let us know how it goes.

Hi @creedon

Thank you for your help.

I think it not that bad but still not centered. 

@ElizabethM

You need to rebuild that area with 5 columns, 2 columns, 5 columns. Right now it's a series of nested columns and such that makes it unbalanced.

I manually rebuilt that section here locally and it looks great. I did use a tiny bit of CSS to shrink the image down a little but the CSS did not play with the columns at all. My hand crafted version is on the top.

I highlighted the columns to show the 5, 2, 5 balance.

If you wanted to center the logo not to the window but in the space between the text blocks then a 5, 5, 2 might do the trick.

@creedon Thank you for the tips but I should still be missing something 😉 

@ElizabethM

Now it's ten 1 columns and one 3 column.

Hi  ! 

Maybe someone here could help me here. 

I am struggling with the logo on the footer. I think it would required some CSS code but I cannot find it. 

Thank you for your help. 

@ElizabethM

Add the following to Design > Custom CSS.

#block-yui_3_17_2_1_1618333545165_8000 {

  margin-left : auto;
  margin-right : auto;
  width : 75px;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

It works ! Thank you

@tuanphan I tried this but its not working on mine. On a mobile deivce the logo is still huge....

I put this in based on the below...

div#block-yui_3_17_2_1_1621874848761_8731 img {
    position: fixed;
    top: 20%;
    right: 0;
    width: 50px;
}

https://ferret-octagon-c2hw.squarespace.com

On 9/23/2019 at 5:27 AM, tuanphan said:

@_Courtney Add to Home > Design > Custom CSS

div#block-4d7b284ccdced9875689 p:after {
   content: "";
   display: block;
   background-image: url(https://static1.squarespace.com/static/5d817ec…/t/5d81a0d…/1568776405451/LOGO-MAKERSMARK.png);
   background-size: contain;
   width: 50px;
   height: 50px;
   margin: 0 auto;
   margin-top: 40px;
}

 

 

18 hours ago, AngieRoxyE said:

@tuanphan I tried this but its not working on mine. On a mobile deivce the logo is still huge....

I put this in based on the below...

 

div#block-yui_3_17_2_1_1621874848761_8731 img {
    position: fixed;
    top: 20%;
    right: 0;
    width: 50px;
}

https://ferret-octagon-c2hw.squarespace.com

 

 

I don't see logo. Did you remove?

@tuanphanyes I can add it back in but it was so large and I had to show the client....adding it now. 

On 5/29/2021 at 1:43 AM, AngieRoxyE said:

@tuanphanyes I can add it back in but it was so large and I had to show the client....adding it now. 

 

You can add this code to Design > Custom CSS

/* resize image block on mobile */
@media screen and (max-width:767px) {
	#block-id {
		width: 30%;
}
}

Use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

hi @tuanphan

could you help me with this question as well? my website is www.forestchaffee.com

i have a couple small hearts on either side of my social media links in my footer on my laptop, but on my phone they show up huge. is there a way to fix this?

thank you!

On 11/28/2021 at 2:04 AM, fc1 said:

hi @tuanphan

could you help me with this question as well? my website is www.forestchaffee.com

i have a couple small hearts on either side of my social media links in my footer on my laptop, but on my phone they show up huge. is there a way to fix this?

thank you!

Add to Design > Custom CSS

/* Mobile hearts */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1603480351374_12703+.row .image-block {
    width: 35%;
    margin: 0 auto;
}
}

21 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile hearts */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1603480351374_12703+.row .image-block {
    width: 35%;
    margin: 0 auto;
}
}

 

hi @tuanphan

thank you for your help! this did, indeed, make the hearts smaller but they are still large and showing up above and below the social media links. i'd like them to be small like the social media buttons, one on each side to the left and the right, like they show up on a laptop. is this possible?

On 12/1/2021 at 7:41 AM, fc1 said:

hi @tuanphan

thank you for your help! this did, indeed, make the hearts smaller but they are still large and showing up above and below the social media links. i'd like them to be small like the social media buttons, one on each side to the left and the right, like they show up on a laptop. is this possible?

Remove above code & add this CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1603480351374_12703+.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#block-yui_3_17_2_1_1603480351374_12703+.row .image-block {
    width: 70%;
}
div#block-yui_3_17_2_1_1603480351374_12703+.row .col:not(.span-4) {
    width: 33.3333% !important;
}
}

6 hours ago, tuanphan said:

Remove above code & add this CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1603480351374_12703+.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#block-yui_3_17_2_1_1603480351374_12703+.row .image-block {
    width: 70%;
}
div#block-yui_3_17_2_1_1603480351374_12703+.row .col:not(.span-4) {
    width: 33.3333% !important;
}
}

 

hi @tuanphan

this worked to get the hearts positioned on either side of the social media buttons in phone layout, but they are still larger than the social media buttons. how do i get the hearts to be smaller? 

thank you for all your help!

On 12/2/2021 at 10:57 PM, fc1 said:

hi @tuanphan

this worked to get the hearts positioned on either side of the social media buttons in phone layout, but they are still larger than the social media buttons. how do i get the hearts to be smaller? 

thank you for all your help!

to change hearts size, edit 70% to 30%