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

14 hours ago, tuanphan said:

to change hearts size, edit 70% to 30%

that made them the right size. the heart to the right looks good but the heart to the left is not centered.

Just now, fc1 said:

that made them the right size. the heart to the right looks good but the heart to the left is not centered.

@tuanphan forgot to tag you 

On 12/5/2021 at 5:49 AM, fc1 said:

that made them the right size. the heart to the right looks good but the heart to the left is not centered.

Don't remove any code. Add this to Design > Custom CSS

/* align left heart icon */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1637882156689_3052 {
    margin-right: 0;
    margin-left: auto;
}
}

On 12/8/2021 at 1:03 AM, tuanphan said:

Don't remove any code. Add this to Design > Custom CSS

/* align left heart icon */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1637882156689_3052 {
    margin-right: 0;
    margin-left: auto;
}
}

thanks so much @tuanphan, this worked!

@tuanphan  could you tell me how to adjust the code so that the hearts are the height of the social media buttons and the same distance apart as the social media buttons, still on either side?

2 hours ago, fc1 said:

@tuanphan  could you tell me how to adjust the code so that the hearts are the height of the social media buttons and the same distance apart as the social media buttons, still on either side?

also, i tried moving the hearts to the bottom of the footer and now they are huge again when i look at them on the phone. i tried re-inserting the code you gave me before but no luck. i am going to take them off the site until i hear back from you.

5 hours ago, fc1 said:

also, i tried moving the hearts to the bottom of the footer and now they are huge again when i look at them on the phone. i tried re-inserting the code you gave me before but no luck. i am going to take them off the site until i hear back from you.

I don't see the hears?

https://www.forestchaffee.com/#empathicspace

2 hours ago, tuanphan said:

I don't see the hears?

https://www.forestchaffee.com/#empathicspace

@taunphon ok, i just put them back on so you can see them. i don't want to leave them up too long because they are huge in phone view. thank you!

1 hour ago, fc1 said:

@taunphon ok, i just put them back on so you can see them. i don't want to leave them up too long because they are huge in phone view. thank you!

Add to Design > Custom CSS

/* mobile hearts */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1635968159540_2879+.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#block-yui_3_17_2_1_1635968159540_2879+.row .span-1 {
    width: 30% !important;
}
}

9 hours ago, tuanphan said:

Add to Design > Custom CSS

/* mobile hearts */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1635968159540_2879+.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#block-yui_3_17_2_1_1635968159540_2879+.row .span-1 {
    width: 30% !important;
}
}

thank you @tuanphan this got the hearts to how they were before. is it possible to make them the same size as the social media links and the same distance apart as the social media links?

On 1/9/2022 at 12:40 AM, fc1 said:

 

You can adjust 30%

On 1/9/2022 at 8:00 PM, tuanphan said:

You can adjust 30%

@tuanphan ok, if i adjust to 16% they are the right size in mobile view, but they are not centered vertically to align with the social media buttons. can i fix this?

in laptop view they are still too big. is this still the correct code for laptop view?

/* laptop hearts */
@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: 30%;
}
div#block-yui_3_17_2_1_1603480351374_12703+.row .col:not(.span-4) {
    width: 33.3333% !important;
}
}
/* align left heart icon */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1637882156689_3052 {
    margin-right: 0;
    margin-left: auto;
}
}

On 1/14/2022 at 12:52 AM, fc1 said:

@tuanphan ok, if i adjust to 16% they are the right size in mobile view, but they are not centered vertically to align with the social media buttons. can i fix this?

in laptop view they are still too big. is this still the correct code for laptop view?

/* laptop hearts */
@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: 30%;
}
div#block-yui_3_17_2_1_1603480351374_12703+.row .col:not(.span-4) {
    width: 33.3333% !important;
}
}
/* align left heart icon */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1637882156689_3052 {
    margin-right: 0;
    margin-left: auto;
}
}

Try this new CSS

/* mobile hearts */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1635968159540_2879+.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#block-yui_3_17_2_1_1635968159540_2879+.row .span-1 {
    width: 16% !important;
}
div#block-yui_3_17_2_1_1635968159540_2879+.row>.span-2 {
    width: 34% !important;
}
}

,

On 1/15/2022 at 2:48 AM, tuanphan said:

Try this new CSS

/* mobile hearts */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1635968159540_2879+.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#block-yui_3_17_2_1_1635968159540_2879+.row .span-1 {
    width: 16% !important;
}
div#block-yui_3_17_2_1_1635968159540_2879+.row>.span-2 {
    width: 34% !important;
}
}

,

 

@tuanphan that made the hearts huge again in phone view and no change in laptop view. i left it so you can see.

3 hours ago, fc1 said:

@tuanphan that made the hearts huge again in phone view and no change in laptop view. i left it so you can see.

You mean reduce size on both mobile + desktop?

On 1/20/2022 at 11:36 PM, tuanphan said:

You mean reduce size on both mobile + desktop?

hi @tuanphan 

mobile: i want the hearts to be the same size as the social media links and to be vertically centered on either side of the social media links. the last code you gave me looks like this.

i just went back to the code you gave me before:

/* mobile hearts */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1635968159540_2879+.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#block-yui_3_17_2_1_1635968159540_2879+.row .span-1 {
    width: 30% !important;
}
}

that looks like this in mobile view:

this is the correct height, but i want the hearts to be centered vertically with the social media buttons. is this possible?

desktop:

this code looks like this in desktop, same questions: can i make the hearts smaller in desktop so they are the same size as the social media links and raise the hearts up so the center of the hearts are vertically aligned with the social media links?

in case this makes it clearer, i want to move the center of the hearts up, here is a diagram, the red arrows show moving the pink centerline (of the hearts) up to align with the blue centerline (of the social media links)

Hi @tuanphan

Some time ago you helped me to add a label in my website. By that time I added some code to the footer and then I added some code to the CSS editor to place the label on the upper right corner of the site. Everything was working perfectly. However, today I changed my website and it seems that the BlockID that was pointing the CSS code is different now, so the label is appearing at the footer.

I've been trying to find the new block Id but I wasn't able to solve it. Hopefully you can let me know how to make it work again. 

This is the code I'm using in the footer:

<a href="https://fswd.es/" target="_blank">

<img src= "https://images.squarespace-cdn.com/content/561cfb9ee4b0f3820b13eb56/1598374441278-N3QB36ZX1903LWP72F58/Sello-FSWD_2.png" width="5%"/>

</a>

And this is the code I'm using in the CSS editor:

div#block-yui_3_17_2_1_1598449969616_5311 img {

    position: fixed;

    top: 100%;

    right: 0;

    width: 45px;

}

@media screen and (max-width:640px) {

div#block-yui_3_17_2_1_1598449969616_5311 img {

               width: 20px !important;

}

}

Thank you very much in advance. 

/Carlos

2 hours ago, CarlosJimenez said:

I've been trying to find the new block Id but I wasn't able to solve it.

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

21 minutes ago, creedon said:

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

I tried, but the thing is that I don't know exactly CSS works so I don't know when I need to look for a block ID or a "block-yui" ID... Etc. 
I tried many different options but any of them worked out haha

On 4/13/2022 at 1:43 AM, CarlosJimenez said:

I tried, but the thing is that I don't know exactly CSS works so I don't know when I need to look for a block ID or a "block-yui" ID... Etc. 
I tried many different options but any of them worked out haha

Hi,

Do you still need help?

48 minutes ago, tuanphan said:

Hi,

Do you still need help?

Yes... I've been trying to point the right ID Block, but it seems I'm doing something wrong... so right now everything is as it was when you told me how to make it work... 

I would need to place that logo on the right margin on top of everything. But I'm not able to move it... 

Thank you very much in advance.

23 hours ago, CarlosJimenez said:

Yes... I've been trying to point the right ID Block, but it seems I'm doing something wrong... so right now everything is as it was when you told me how to make it work... 

I would need to place that logo on the right margin on top of everything. But I'm not able to move it... 

Thank you very much in advance.

Can you share site url again? We will take a look

8 hours ago, tuanphan said:

Can you share site url again? We will take a look

This is the website:

https://www.carlosjimenezdesign.com/

The idea is to place the logo that right now is in the footer on the right margin on top of everything. To do this, you helped me telling me to add some code into the footer with a code-block. With that code we place the image in the footer and we make the image point to the external link.

Then, you told me to add some code to the CSS code. I guess this code was to place the image in the right position. However, I had to duplicate my website and in that point something went wrong. So it seems that the yui-block we were pointing is not the image anymore... And this is what I don't know how to solve. 

This is the code we were using in the CSS

div#block-yui_3_17_2_1_1598449969616_5311 img {

    position: fixed;

    top: 100%;

    right: 0;

    width: 45px;

}

@media screen and (max-width:640px) {

div#block-yui_3_17_2_1_1598449969616_5311 img {

               width: 20px !important;

}

}

Thank you very much again.

On 7/6/2022 at 10:33 AM, ZABS860 said:

Hi @tuanphan, I used your code on my client's website (https://www.aimeesternestates.com //password: Newpassword) to add industry logos to the footer. But she wants it ideally to be in the text box above it, directly after the last word and period. Is there a way to format it like this? TBH I'm not sure it will look good / legible, in which case is there a way to left align the logos instead? Many thanks.

You mean add a text above industry logos?