Jump to content

Logo in Footer Too Large on Mobile

Recommended Posts

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

Edited by christinas
wrong header
Link to comment
  • christinas changed the title to Logo in Footer Too Large on Mobile
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 Cssimage.png.a3e77128889f580d01e146b5b4b7d05c.png


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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 weeks later...

@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
Link to comment
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
    }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.