title: Customising Image size and padding in Squarespace
body: <p>I've had the misfortune of inheriting the task to update my company's website with our newest members. Due to this being a small company, the previous guy did not leave any documentation or notes based on how he created the website. </p>
  
  <p>Essentially right now we have a members page that contains Image Blocks (Inline, with captions). <a href="https://ctpartners.com.au/members" rel="nofollow noreferrer">Click here</a> to get to the page in question. </p>
  
  <p>I'm trying to add a new member in, but it seems like the previous guys has had some sort of customisation. Adding a new image block immediately showed to me that the current blocks are very different to the default ones that squarespace has. <a href="https://ctpartners.com.au/member-profile-1" rel="nofollow noreferrer">See here</a> for a staging page I created, with the newest image block (Simon McLean) on the very bottom right. </p>
  
  <p>Took me hours to figure out that Squarespace actually resizes your images upon import to an image block. So I inspected the elements on Chrome and found the below elements to change. Below are screenshots from before the change to the elements to after the change in the elements: </p>
  
  <p>Before: 
  <a href="https://i.stack.imgur.com/PFDkv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PFDkv.png" alt="Before Element Changes"></a></p>
  
  <p>After: 
  <a href="https://i.stack.imgur.com/gF5MT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gF5MT.png" alt="After Element Changes"></a></p>
  
  <p>Note that I got the changes by simply looking up the image next to the one used in the example (i.e. Example is Anna's Image and I'm trying to fix Simon's image). </p>
  
  <p>Pardon the noob question, but how do I make these changes permanent? I've so far tried the following: </p>
  
  <ol>
  <li>Modified the Custom CSS via the Design > Custom CSS using the below code. No discernible effect. </li>
  </ol>
  
  <pre><code>element.style {
      left: 0%;
      top: 0%;
      width: 100%;
      height: 100%;
      position: absolute;
      padding-bottom: 100%;
  }
  </code></pre>
  
  <ol start="2">
  <li>Used the above code, but this time as a Page header injection. Still no effect. </li>
  </ol>
  
  <p>I'm honestly out of ideas - Thank you for helping me. I'm definitely out of my depth here. </p>