Precision footer image positioning

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

https://support.squarespace.com/hc/en-us/articles/205814528-Image-Blocks#toc-resize-the-image

15 minutes ago, derricksrandomviews said:

https://support.squarespace.com/hc/en-us/articles/205814528-Image-Blocks#toc-resize-the-image

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

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

thanks @derricksrandomviews that didn't seem to work.

That code would suggest that only the mobile view location would be affected, not the desk top version too. Nor would it affect sizing? 

For reference the specific  image block ID is: 

#block-yui_3_17_2_1_1608328645763_4525

Any thoughts? 

It should be bothm, media screen is desktop and max width is mobile. That is my understanding. 

The @media rule is used in media queries to apply different styles for different media types/devices.

This is a code school that might help you also:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Thanks again. 
 

I have access to the code school , which I’ve used thus far for other customisations, but it but it’s not helping to solve this issue. 
 

Perhaps another user would be bale to suggest a different solution?

Hey @bangank36  don’t suppose this is something you can assist with? Your other recommendations have been spot on! 🤷‍♂️🙏👍

M/.

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