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

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


_Courtney

Question

Recommended Posts

  • 0
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

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
  • 0

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

 

Link to comment
  • 0
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?

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
  • 0

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

1454932455_ScreenShot2021-04-09at9_45_08AM.thumb.png.7d1845a1f8ef9ddf768e234cd5831d2f.png

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

1692599380_ScreenShot2021-04-09at10_08_32AM.thumb.png.cbe8c547396b3bde25f7e3a43bc80e9a.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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


 

 

 

Screen Shot 2021-05-27 at 3.22.02 PM.png

Link to comment
  • 0
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

 

 

Screen Shot 2021-05-27 at 3.22.02 PM.png

I don't see logo. Did you remove?

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
  • 0
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

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

 

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
  • 0
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?

Link to comment
  • 0
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;
}
}

 

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
  • 0
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!

Link to comment
  • 0
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%

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...