Logo in Footer Too Large on Mobile

Site URL: https://www.maisongraceatl.com

Hi @tuanphan :

I'm very new to Squarespace and figuring this out as I go. It looks like I'm having the same issue as others in this thread; the two logos in my footer look fine on desktop but resize to be MASSIVE on mobile. What code do I need to insert to fix this? 

My page is currently password protected:

www.maisongraceatl.com

password: rileysblog

Thanks in advance!!

7 minutes ago, christinas said:

Site URL: https://www.maisongraceatl.com

Hi @tuanphan :

I'm very new to Squarespace and figuring this out as I go. It looks like I'm having the same issue as others in this thread; the two logos in my footer look fine on desktop but resize to be MASSIVE on mobile. What code do I need to insert to fix this? 

My page is currently password protected:

www.maisongraceatl.com

password: rileysblog

Thanks in advance!!

You can try to paste this in Design->Custom Css

@media only screen and (max-width: 767px) {
      section[data-section-id="5faf8e500e8bbf646f421cdf"] .sqs-block-image-figure {
        width: 100px
      }
}

Beautiful, that worked perfectly! Thanks @bangank36!

@bangank36 Is there any way you could show me how to resize 2 other images for mobile on my site as well? I'm having the same issue as above on this page: https://www.maisongraceatl.com/meetchristina

• My signature "Christina" doesn't resize properly in mobile
• The "IO" logo in the pink banner toward the bottom of the page (in the pink section) doesn't resize properly in mobile

9 hours ago, christinas said:

@bangank36 Is there any way you could show me how to resize 2 other images for mobile on my site as well? I'm having the same issue as above on this page: https://www.maisongraceatl.com/meetchristina

• My signature "Christina" doesn't resize properly in mobile
• The "IO" logo in the pink banner toward the bottom of the page (in the pink section) doesn't resize properly in mobile

Updated them all

@media only screen and (max-width: 767px) {
    section[data-section-id="5faf8e500e8bbf646f421cdf"] .sqs-block-image-figure {
        width: 100px
    }
    #block-yui_3_17_2_1_1607715740244_5973 .sqs-block-image-figure {
        width: 100px
    }
    section[data-section-id="5fdc37ede4f40f70185be8a5"] {
        min-height: inherit !important;
    }
    #block-cc7c7fcb69ebc477004d .sqs-block-image-figure {
        width: 100px
    }
}

@christinas I see this page, on tablet, has some problems. https://www.maisongraceatl.com/meetchristina

1. First section text is a bit narrow. 

2. Favorite is similar

3. Huge space on top/bottom of footer logo

4. FAQs link break in new line

If you check on tablet, I think you will some other problems.

Add this to Design > Custom CSS to fix above

/* Fix tablet issues */
@media screen and (max-width:991px) and (min-width:768px) {
footer.sections .content {
    width: 100% !important;
}
/* remove huge space */
[data-section-id="5fdc37ede4f40f70185be8a5"] {
    min-height: 10vh !important;
}
/* text width */
[data-section-id="5fb0b067f8f3f14190d23d37"] + section .content {
    width: 80% !important;
}
}

@tuanphan Thanks so much!