Move Image Blocks

What does this code do?

This code snippet will allow you move image blocks around within or outside of its section.

Stop! Read this first!

These code snippets come with a warning. Moving objects around using CSS can be tricky and you may come across a few problems.

1. Mobile Friendliness: You may have a hard time positioning the image so that it looks good on all screen sizes. This is especially true when using absolute positioning (see below). I recommend using “vw” units instead of “px” to help (see below).

2. Site Width: This can cause your website to be larger than 100% of the viewport width which gives your viewers the ability to swipe side to side. If this happens, I recommend adding the following code to the top of your CSS. It will hide anything outside of the viewport.

/* No Extra on the Sides of the Website */
#page,
footer {
  overflow: hidden;
}

Add the Image Block

Add the Image Block as close to where you would like it placed as possible. You will most likely have to play around with the placement of the block.

Code Snippets

These code snippets will require more editing than others in this encyclopedia. So, I am going to give you some background information on the different properties we will be using in this code!

Position Absolute VS Relative

Would you like the image to keep its space within the website? In other words, do you want the other image blocks to move around it or act like its not there? If you would like the other blocks to move around it, then you will be using “position: relative;”. If you would like the other blocks to act like it is not there, the you will be using “position: absolute;”.

• Position relative places an element relative to its current position without changing the layout

• Position absolute places an element relative to its parent, taking it out of line with the other elements. Note that for this position, you must provide a width.

Top, Bottom, Left, Right

You can then position the element using top, bottom, left, and right. I would suggest using “vw” as a unit to help with mobile friendliness.

VW or PX

VW represents a % of the viewport width which means it is responsive to the size of the screen. PX represents pixels in the view display which means it is the same regardless of the size of the screen. When positioning an element, I suggest using vw as it will help position the element for multiple screen size. If you would like your image to be the same size regardless of the size of the screen, then I would use px for the width. If you would like your image to resize with the screen, then I would use vw.

Put it All Together

Copy and paste the appropriate code into Design > Custom CSS. Then play with the different properties and numbers to get your desired effect.

Position Relative

/* Move an Image Up */
#BLOCKID {
  position: relative;
  top: -5vw;
}

/* Move an Image Down */
#BLOCKID {
  position: relative;
  bottom: -5vw;
}

/* Move an Image Left */
#BLOCKID {
  position: relative;
  left: -5vw;
}

/* Move an Image Right */
#BLOCKID {
  position: relative;
  right: -5vw;
}

Position Absolute

/* Place Image in the Top Left Corner */
#BLOCKID {
  position: absolute;
  width: 40vw;
  top: -5vw;
  left: -12vw;
}

/* Place Image in the Top Right Corner */
#BLOCKID {
  position: absolute;
  width: 40vw;
  top: -5vw;
  right: -12vw;
}

/* Place Image in the Bottom Left Corner */
#BLOCKID {
  position: absolute;
  width: 40vw;
  bottom: -5vw;
  left: -12vw;
}

/* Place Image in the Bottom Right Corner */
#BLOCKID {
  position: absolute;
  width: 40vw;
  bottom: -5vw;
  right: -12vw;
}

If you want to move an image so that it overlaps the section above or below, you may need to add the following code for the image to appear.

Squarespace 7.0

Add the following code and insert the page id of the section the image is in.

#PAGEID {
  overflow: visible;
}

Squarespace 7.1

Add the following code to the code from above.

z-index: 20;

Mobile Responsive

If you would like to set a different positioning on Tablet or Mobile duplicate the code inside a media query and then change the properties as desired. Note: If there are any properties that are not changed, then delete them from the media query.

/*Tablet Version */
@media only screen and (min-width: 641px) and (max-width: 940px){
  
  PLACE TABLET CODE HERE
  
  
}

/*Mobile Version */
@media only screen and (max-width: 640px){
  
  PLACE MOBILE CODE HERE
  
  
}

For example, if I want to change the left positioning for tablet and mobile:

#BLOCKID{
  position: absolute;
  width: 40vw;
  top: -5vw;
  left: -12vw;
}

/*Tablet Version */
@media only screen and (min-width: 641px) and (max-width: 940px){
  #BLOCKID {
 left: -5vw   
  }
}

/*Mobile Version */
@media only screen and (max-width: 640px){
   #BLOCKID{
 left: -3vw   
  }
}

How To Use It

1. Add an Image Block to your website as close to where you would like it placed as possible.

2. Decide whether you want relative positioning or absolute positioning.

3. If using relative positioning, select the code that most matches what you would like to do. Insert the images block id. Then play with the number to position how you would like.

4. If using absolute positioning, select the code that most matches what you would like to do. Insert the images block id. Decide whether you would like to use px or vw for the width. Then play with the numbers to position how you would like.

5. If the image is moving above or below its section and is not overlapping, add the code as indicated above.

6. Check the positioning on mobile and tablet. It may be beneficial to look on an actual mobile or tablet as well as in different browsers. The live version of my site, places some images in different places then the Squarespace Editor shows. If needed, use the media queries above to reposition the element on different screen sizes.

7. To learn how to find a page id or block id check out our Start Here guide.