Jump to content

HELP! Why are my summary grids resizing on scroll?

Recommended Posts

I have a summary block on each of my class pages. When the page first loads, the grid is 2 columns, but when I scroll to the bottom it corrects to the desired 5 columns. Screenshots attached! I need them to load as 5 columns and stay put. Can anyone help, @tuanphan? This site is due to launch on Saturday, I'm stressing!

 

https://www.andasanas.com/class-styles-list/hatha

password: 140ann

 

 

Link to comment

Have you applied any CSS to get this as 5 rather than 2 columns?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi again, I think I might have figured out the CSS that's causing the problem! I can take it out, but then I don't have the styling that I'm trying to achieve. Maybe you can help? 

I'd like these grid items to be a circle, where the title comes up over top on hover (I've attached a screen shot of what I'm trying to achieve).

 

I had used the following code which had done it, but then also introduced that column width issue. Any ideas?

 

/* gallery image title on hover */
.collection-64126374961efe4a713efee5 {

 .summary-item img {
   position: relative; 
   transition: all .5s ease!important;
  }
  .summary-content {
      position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: all .5s ease;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);}
  
  .summary-thumbnail {
    border-radius: 500px;
  }
  .summary-thumbnail img {
    transform: scale(1.25);
  }
  .sqs-block-summary-v2 .summary-block-setting-show-title .summary-thumbnail-container {
    margin: 0;
  }
  .summary-title a {
    color: white !important;
    font-size: 0.7rem;
  }
  .summary-title {
    opacity: 0;
    transition: all .5s ease;
  }
  .summary-item:hover img{
    -webkit-filter: brightness(70%);       filter: brightness(70%);
  }
  .summary-item:hover .summary-title {
    opacity: 1 !important;
  }
}

Screen Shot 2023-04-27 at 12.53.10 PM.png

Link to comment

I'm not 100% sure, but my guess would be that this may be the line that is causing the problems:

  .summary-thumbnail img {
    transform: scale(1.25);
  }

It's not that there's something wrong with your coding, but during loading it may be causing the images to be bigger than the summary grid is expecting and therefore scales things up. I assume this is in so the images extend far enough for the border radius to make a complete circle?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.