Jump to content

Summary block image jumps on next line when minimizing screen

Go to solution Solved by Ziggy,

Recommended Posts

Hi,

I have a summary block on my homepage to preview my blog. I'm using the Grid Design with 5 items. It looks great on my screen, but when I minimize my browser window, I can see that the last image jumps to the next line. (This is what a friend of mine actually sees on their computer screen.)

Is there a way to avoid this? To keep them in one line? Let them shrink instead?

Many thanks!

Bildschirmfoto 2023-10-16 um 08.07.16.png

Bildschirmfoto 2023-10-16 um 08.07.53.png

Link to comment

Yes, this is typically controllable, can you share your website URL and this page?

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

try this:

#block-266bbe6e7128a425efb9 {
  .sqs-block-summary-v2 .summary-item-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap:12px;
  }
  .sqs-block-summary-v2 .summary-item {
    width: 100% !important;
  }
  .sqs-block-summary-v2 .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
  }
}

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
19 minutes ago, Ziggy said:

try this:

#block-266bbe6e7128a425efb9 {
  .sqs-block-summary-v2 .summary-item-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap:12px;
  }
  .sqs-block-summary-v2 .summary-item {
    width: 100% !important;
  }
  .sqs-block-summary-v2 .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
  }
}

That's not working. Behaving the same as before, where the last image jumps on the next line when I minimize the browser window.

Link to comment
  • Solution

It may need to target the section rather than the block, try this:

section[data-section-id="6523aaf3e80dc370de67a517"] {
  .sqs-block-summary-v2 .summary-item-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap:12px;
  }
  .sqs-block-summary-v2 .summary-item {
    width: 100% !important;
  }
  .sqs-block-summary-v2 .img-wrapper img {
    width: 100% !important;
    height: auto !important;
  }
}

If it does work, you may want more code to make the font smaller.

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
21 minutes ago, Ziggy said:

If it does work, you may want more code to make the font smaller.

If you do need a smaller font, then try this:

@media only screen and (max-width:767px) {
  section[data-section-id="6523aaf3e80dc370de67a517"] {
    .summary-title-link {
      font-size:2vw;
      line-height:1.2em;
    }
  }
}

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
1 hour ago, Ziggy said:

If you do need a smaller font, then try this:

@media only screen and (max-width:767px) {
  section[data-section-id="6523aaf3e80dc370de67a517"] {
    .summary-title-link {
      font-size:2vw;
      line-height:1.2em;
    }
  }
}

I don't see a difference in the font size.

Link to comment
22 minutes ago, tuanphan said:

Just tested the code & it works here. Try move the code to bottom of CSS box. Note: this code runs on mobile only

Thank you! I wasn't aware that this was for mobile view, which I haven't optimized yet. Looking at the mobile version, I didn't like how it looked with all five images in one line. I removed the code, but now I can't seem to go back to only four images in a grid. They won't be spaced out evenly. Can you help with this?

Link to comment
On 10/19/2023 at 4:53 PM, Aurora said:

Thank you! I wasn't aware that this was for mobile view, which I haven't optimized yet. Looking at the mobile version, I didn't like how it looked with all five images in one line. I removed the code, but now I can't seem to go back to only four images in a grid. They won't be spaced out evenly. Can you help with this?

Use this code

@media screen and (min-width:768px) {
[data-section-id="6523aaf3e80dc370de67a517"] {
.sqs-block-summary-v2 .summary-item-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:12px;
  }
  .sqs-block-summary-v2 .summary-item {
    width: 100% !important;
  }
  .sqs-block-summary-v2 .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
  }}}

 

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

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.