Jump to content

Footer appearance on mobile

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1 hour ago, admviwi said:

Site URL: http://www.vinadawines.com

 

 

Site URL: www.vinadawines.com

Hello, the footer and especially the logo is huge on mobile device and looks very ugly. Tried diff codes but doesn't seem to work. Any ideas on how I can fix this?

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1635434500253_26412 .sqs-image-shape-container-element  {
    padding-bottom: 50% !important;
  }

  #block-yui_3_17_2_1_1635434500253_26412 img  {
    width: 50% !important;
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

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

Thanks for your quick answer, yes it makes the logo a bit smaller but I can only see half te logo (see printscreen). The rest of the footer didn't get smaller yet. I tried to make some tweaks with the %, only if I put the padding-bottom: on 110% is can see the whole logo but then the space between the logo and the rest of the text looks ugly so this can't be the solution 🙂 hope you could help me out also with the appearance of the rest of the footer. ThanksIMG_0784.PNG.42013c3eb059614dc17d975460bc5069.PNG

Link to comment
12 hours ago, admviwi said:

Thanks for your quick answer, yes it makes the logo a bit smaller but I can only see half te logo (see printscreen). The rest of the footer didn't get smaller yet. I tried to make some tweaks with the %, only if I put the padding-bottom: on 110% is can see the whole logo but then the space between the logo and the rest of the text looks ugly so this can't be the solution 🙂 hope you could help me out also with the appearance of the rest of the footer. ThanksIMG_0784.PNG.42013c3eb059614dc17d975460bc5069.PNG

 

Link to comment

@admviwi use this new code

/* Mobile footer logo */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1635434500253_26412 {
    width: 30%;
    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

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.