Jump to content

Precision footer image positioning

Recommended Posts

Site URL: https://guava-guppy-sx4w.squarespace.com/config/

 

 

URL: https://guava-guppy-sx4w.squarespace.com/config/

 

Hi,

 

so one of the last elements to sort before my. site goes live: positioning of the footer logo.

Help request is two fold:  

1). Change the size of footer logo (image block) on mobile and desk top. 

2). align the logo to both the bottom copy block and the right hands side of the slideshow image. 

See screen shot examples of what I'm trying to achieve below. 

As always your help is. greatly appreciated. 

Thanks!!

M/. 

 

 

 

 

 

 

851981795_Screenshot2020-12-18at20_52_15.thumb.png.30e7161cd68b469cd75b30b323913c8f.png1041030480_Screenshot2020-12-18at20_45_19.thumb.png.a0e291f244332f0765b2a7f97ea3577f.png

Link to comment
  • Replies 8
  • Views 1.3k
  • Created
  • Last Reply
15 minutes ago, derricksrandomviews said:

Thanks @derricksrandomviews for your reply!  I think your link really only covers beginner level image block use and doesn't cover exact positioning in relation to other items, or adapt the size of the logo relative to desktop Vs Mobile.  

I've already followed the basics to add the. logo. image. You can see below what I have - the post above is what's looking to achieve. 

Looking for some custom CSS, I think? 

Thanks again!  

Best, 

M/.

 

 

 

1010256497_Screenshot2020-12-18at21_58_24.thumb.png.71d2cd3e14b5780b2f03c132d065b92e.png297191967_Screenshot2020-12-18at21_58_42.thumb.png.2268f27cef4c9ff30ee6ef22e6bf49f2.png

Link to comment

You will need to id the specific block and use this code, replace the block id with yours. And you can adjust the width and padding  to set the block where you want it. Change 0 to say 10px 

@media screen and (max-width:767px) {
div#page-section-5efb6da6831f74754a4493da .image-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0; 
    padding-right: 0 !important}
}
}

Squarespace block identifier extension for Chrome is here: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Link to comment

Hi managed to solve this myself using some some code I used for a previous element. Leaving the methodology here incase some one else can benefit from it. 

Essentially I duplicated the footer and hid one in mobile and the other in desktop which allows for different code to be applied to each case with out affecting the other. Using this code added here: Settings>Advanced>Code Injection>Footer

<style>
  @media only screen and (max-width: 780px) {
    [data-section-id="
5fa468b9be882012fbd59af3"] { 
            display: none !important; 
    } 
  }
@media only screen and (min-width: 781px) {  
    [data-section-id="
5fde26f291828d0f5d3c8f91"] { 
        display: none !important;
    }
  }

Note: using Google's ID finder extension in Chrome really helped.

I then used the following code in Design> Custom CSS to size and position the specific image blocks, again using the google extension to get the image block ID: 

 

 div#block-yui_3_17_2_1_1608328645763_4525 {
   width: 40px;
   height: 50px;
   margin: 0px;
   margin-bottom: -30px;
   margin-top: 0px;
  margin-left: 870px;
}

  div#block-a169096a77f68e250d00 {
   width: 30px;
   height: 50px;
   margin: 0px;
   margin-bottom: -30px;
   margin-top: -50px;
  margin-left: 280px;
}

 

Any items highlighted need to be changed for user specific ID's! 

Hope that helps. 

 

Link to comment

Archived

This topic is now archived and is closed to further replies.


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