Logo in Footer Too Large on Mobile

On 11/30/2020 at 10:24 PM, bexarmy said:

Hello, sorry I'm another one asking for the big-Logo-in-footer-on-mobile support!

I have a couple of logos in there.

My site is www.holtbyjonpeake.co.uk

Thank you!

You mean flag image? Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1606479706971_10192 {
    width: 50%;
}
}

On 12/1/2020 at 5:05 AM, Praneetha said:

Hi @tuanphan yes I'd like some help with making the padding even across those boxes. If you could help with css that would be amazing!

Can you share site url?

@tuanphan here is my url: https://designbypran.com/

The padding looks even on my screen, but if there's a way to force the padding to be the same regardless of screen size that would be great. Thanks!

I'm having the same issue here with the logo being huge on mobile - @tuanphan can you help me please? 🙂

Site was made live this morning - doh!

http://www.assembletalent.com/

Thanks!

On 12/18/2020 at 9:26 PM, tuesdayroo said:

I'm having the same issue here with the logo being huge on mobile - @tuanphan can you help me please? 🙂

Site was made live this morning - doh!

http://www.assembletalent.com/

Thanks!

Add to Home > Design > Custom CSS

/* Resize footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1608237464377_37519 {
    width: 50%;
    margin: 0 auto;
}
}

Thank you so much @tuanphan - that worked perfectly!

On 12/22/2020 at 4:59 PM, tuesdayroo said:

Thank you so much @tuanphan - that worked perfectly!

I see some pages on mobile have long content. You can consider adding a back to top button.

On Tablet, Email/Linkedin icons in Footer in 2 rows. Do you want to make them same row?

Hi,

I'm having the same issue with a to big footer logo on mobile version.

URL: www.urbanea.se
Password: vinter2021

Thanks a lot!

On 1/13/2021 at 10:49 PM, MochP said:

Hi,

I'm having the same issue with a to big footer logo on mobile version.

URL: www.urbanea.se
Password: vinter2021

Thanks a lot!

Add to Design > Custom CSS

/* resize footer logo mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610015162371_34532 {
    width: 50%;
    margin: 0 auto;
}
}

On 1/16/2021 at 10:21 AM, tuanphan said:

Add to Design > Custom CSS

/* resize footer logo mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610015162371_34532 {
    width: 50%;
    margin: 0 auto;
}
}

 

Thank you very much!

@tuanphanhello! I followed the coding you mentioned above, but I'm still hitting an issue with the spacing under the decreased image size. Does anyone know how to help?

17 hours ago, srobinsondesign said:

@tuanphanhello! I followed the coding you mentioned above, but I'm still hitting an issue with the spacing under the decreased image size. Does anyone know how to help?

Can you share site url?

Hi!

I'm also after a piece of code that will work for my site to make the logo smaller on mobile

Site:
http://dram.app

Password:
iloveBeer22!

19 hours ago, Oliver_H said:

Hi!

I'm also after a piece of code that will work for my site to make the logo smaller on mobile

Site:
http://dram.app

Password:
iloveBeer22!

Add to Design > Custom CSS

/* resize footer logo mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1618943747766_7494 {
    width: 30%;
}
}

On 5/30/2020 at 8:18 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* public */
div#block-yui_3_17_2_1_1590699596051_56631+.row>.span-2 {
    width: 50% !important;
    margin: 0 auto;
}
/* nyc */
div#block-yui_3_17_2_1_1590699596051_21899+.row>div:not(:first-child) {
    width: 50% !important;
    margin: 0 auto;
}
}

 

@tuanphan

I have the same problem... the logo in my footer looks fine on desktop but it takes up the entire mobile screen. could you please help me?

website URL: www.dresscoding.org

7 hours ago, smesi said:

@tuanphan

I have the same problem... the logo in my footer looks fine on desktop but it takes up the entire mobile screen. could you please help me?

website URL: www.dresscoding.org

Your site is private. Can you setup password & share url again?

18 hours ago, tuanphan said:

Your site is private. Can you setup password & share url again?

Yes, sorry, it's available now with the password DressCoding1. Url: www.dresscoding.org

Thanks!

22 hours ago, smesi said:

Yes, sorry, it's available now with the password DressCoding1. Url: www.dresscoding.org

Thanks!

Hi. Resize images, or resize + make 3 images side by side?

7 hours ago, tuanphan said:

Hi. Resize images, or resize + make 3 images side by side?

 

Unfortunately resizing haven't changed the displaying problem on mobile.  These are the logos of our partners so we need these 2, but there's a blank text block on their right.

On 5/1/2021 at 10:25 PM, smesi said:

Unfortunately resizing haven't changed the displaying problem on mobile.  These are the logos of our partners so we need these 2, but there's a blank text block on their right.

Add to Design > Custom CSS

/* mobile footer logos */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-1 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

48 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* mobile footer logos */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-1 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

This worked, thank you so much!

On 5/3/2021 at 9:40 PM, smesi said:

This worked, thank you so much!

Do you want to fix these?

Site URL – https://www.dresscoding.org/

1. (Mobile-Homepage) Move section image to center?

2. (Tablet-Rolunk) Increase text width?

3. (Blog) You haven’t changed SEO Title so the browser tab name still shows “Blog 3”

Hey @tuanphan, Thank you for all your help to folks so far! I've gone through all the posts so far, and I was not able to reverse-engineer the solution to my Footer Logo. I've tried a ton of different options, but I feel like this yui # is the closest to the area I'm having the issue.

/* Resize footer logo */
@media screen and (max-width:767px) {
  div#block-block-yui_3_17_2_1_1620672253801_104 {
    width: 30%;
    margin: 0 auto;
}
}

Link: two44.squarespace.com ; Pass: 244i

I'd love to know how you go about finding this code. As the expression goes, "teach a man to fish, and he'll be satisfied for the rest of his life" 🙂

Any help you can give would be greatly appreciated! Thanks!

4 hours ago, zachmcnair said:

Hey @tuanphan, Thank you for all your help to folks so far! I've gone through all the posts so far, and I was not able to reverse-engineer the solution to my Footer Logo. I've tried a ton of different options, but I feel like this yui # is the closest to the area I'm having the issue.

/* Resize footer logo */
@media screen and (max-width:767px) {
  div#block-block-yui_3_17_2_1_1620672253801_104 {
    width: 30%;
    margin: 0 auto;
}
}

Link: two44.squarespace.com ; Pass: 244i

I'd love to know how you go about finding this code. As the expression goes, "teach a man to fish, and he'll be satisfied for the rest of his life" 🙂

Any help you can give would be greatly appreciated! Thanks!

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

Hi @tuanphan you must be tired of this 😅, but I'm having the same issue on my site. I have three accreditation logos in the footer that look fine on desktop but appear stacked and large on mobile. Any help with custom CSS to rectify this issue would be greatly appreciated.

Site: https://tomato-flatworm-tztz.squarespace.com

Password: inglis

Best Regards

23 hours ago, BradSB92 said:

Hi @tuanphan you must be tired of this 😅, but I'm having the same issue on my site. I have three accreditation logos in the footer that look fine on desktop but appear stacked and large on mobile. Any help with custom CSS to rectify this issue would be greatly appreciated.

Site: https://tomato-flatworm-tztz.squarespace.com

Password: inglis

Best Regards

Add to Design > Custom CSS

/* Mobile-Footer-Logos */
@media screen and (max-width:767px) {
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(3) {
    width: 66.666% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(3) .span-1 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(4) {
    width: 33.333% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-3:nth-child(5) {
    clear: left;
}
}