Summary block image jumps on next line when minimizing screen

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!

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

2 hours ago, Ziggy said:

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

Yay, thanks!

https://www.kristinkuehn.com

pw: 2eRFn7gQ

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;
  }
}

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.

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;
    }
  }
}

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.

On 10/16/2023 at 10:52 PM, Aurora said:

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

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

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?

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;
  }}}