Jump to content

Custom Code Block Image Sizing

Go to solution Solved by tuanphan,

Recommended Posts

Hello, 

Having some trouble getting images in my code block to display correctly. 

Trying to set up a team page with a hover image swap. My goal is that the images to fill the code block width (padding in between the blocks). Every thing looks correct in my preview window, but when I view the live site the images are full size and don't scale down to fit the block. The hover image is sized correctly, but the initial image is overlapping with the next block. 

Here is the custom CSS I'm using

/*Team Hover Images*/
.image-swap img:nth-child(1){
  position:absolute;
  transition:300ms;
}

.image-swap img:nth-child(1):hover{
  opacity:0;
}

Here is the code block HTML

<div class="image-swap">
    <img src="https://images.squarespace-cdn.com/content/v1/61956c72f3da8549e1b39fc3/1649371276995-H2E7A5890D633FONK44X/KM_headshot_Pro_3.jpg?format=500w">
      <img src="https://images.squarespace-cdn.com/content/v1/61956c72f3da8549e1b39fc3/1649371259500-6LNRHJMQ6HQY851AB3IJ/KM_headshot_Fun_3.jpg?format=500w">
</div>

UPDATE: I found the solution... ended up finding the original tutorial I got the code from. Updated code was pinned in the top comment. https://www.youtube.com/watch?v=7WC906n4t5c 

 

Quote

It seems like some templates add padding to the right and bottom on the live site  making the second image smaller on hover only on the live site.

add this to your CSS editor replacing YOURBLOCKID with the ID of your block.

YOURBLOCKID {
  padding: 0;
  margin: 17px;
  display: flex;
  align-content: center;
}

If you have multiple blocks with this you can separate the block ID's with commas:

YOURBLOCKID, YOUROTHERBLOCKID {
  padding: 0;
  margin: 17px;
  display: flex;
  align-content: center;
}

 

Figured I'd update my post with the solution in case it can help someone else. If this is against the forum rules just let me know and I can take the post down. Hope this helps. 
 

 

Edited by allaxisdesign
Updated with solution
Link to comment
  • Replies 6
  • Views 664
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...

Hi @tuanphan wondering if you can help us with a similar problem that is described above. We have hover images on a team page as well and we are trying to figure out how to prevent the image code blocks from over lapping one another when the page is scaled down. Can you take a look? Below is the url to the site as well as the password. Thank you in advance! 

https://spinach-circle-hb9w.squarespace.com/firm

PW: DoveLove2022!

 

Link to comment
42 minutes ago, MinerMan2022 said:

Hi @tuanphan wondering if you can help us with a similar problem that is described above. We have hover images on a team page as well and we are trying to figure out how to prevent the image code blocks from over lapping one another when the page is scaled down. Can you take a look? Below is the url to the site as well as the password. Thank you in advance! 

https://spinach-circle-hb9w.squarespace.com/firm

PW: DoveLove2022!

 

#1. I see you solved

#2. You mean image cut off? I Don't see they overlap.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

Because you used fixed width 350px

When resizing down the screen, the total width of the 4 images is larger than the width of the screen, forcing them to overlap.

Try adding this to Design > Custom CSS

[id*="img-hover"] {
    width: 100% !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 7/13/2022 at 9:34 AM, tuanphan said:

Because you used fixed width 350px

When resizing down the screen, the total width of the 4 images is larger than the width of the screen, forcing them to overlap.

Try adding this to Design > Custom CSS

[id*="img-hover"] {
    width: 100% !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center center;
}

 

@tuanphan that worked perfectly. Thank you so so much!

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.