have to refresh website on phone to display images on summary block

Hi,

I have to refresh my website on a mobile to display images on summary squarespace - they don't show on first load, any advice to solve this would be great 🙏 (works fine on desktop).

I have used CSS to make the image in summary block of a blog larger on mobile display, here is all my summary block code:

.summary-header-text {
    font-size: 25px;
    font-weight: bold;
}
.summary-metadata-item--cats a {
  background-color: black;
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 0px;
  display: inline-block;
  margin-bottom: 5px;
}
.blog-meta-item--categories a {
  background-color: black;
  color: white !important;
  text-decoration: none;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 0px;
  display: inline-block;
  margin-bottom: 5px;
}
@media screen and (max-width:767px) {
    body#collection-65b0437eb6958532f041c98f .summary-item,
    body.alb-library .summary-item {
        display: flex !important;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
    }
    body#collection-65b0437eb6958532f041c98f .summary-v2-block .summary-thumbnail-outer-container,
    body.alb-library .summary-v2-block .summary-thumbnail-outer-container {
        float: none !important;
        width: 108% !important;
        margin: 0 auto;
        padding: 0;
    }
    body#collection-65b0437eb6958532f041c98f .summary-thumbnail-outer-container img,
    body.alb-library .summary-thumbnail-outer-container img {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
    body#collection-65b0437eb6958532f041c98f .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container,
    body.alb-library .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
        float: none !important;
        width: 100% !important;
    }
} 

Thanks in advance.

Hi,

Can you share link to page? We can check easier

Hi. Thanks for your help. The specific page is https://www.itsalllegalbaby.com/alb-library - but you need to view it via mobile to see the issue.

I'm am seeing this issue on desktop as well.

The following ruleset is causing the issue.

body#collection-65b0437eb6958532f041c98f .summary-thumbnail-outer-container img,
body.alb-library .summary-thumbnail-outer-container img

  {
  
    display : block;
    height : auto !important;
    margin : 0 auto;
    width : 100% !important;
    
    }

Specifically the following selector is the cause.

body#collection-65b0437eb6958532f041c98f .summary-thumbnail-outer-container img

Remove it, make a copy somewhere.

I observed that when the ruleset is active, SS responds by not adding the src attribute to the images tags. I'm assuming that the CSS is messing up SS's lazy loading code.

Thank you!!!!! Seems to have solved the problem. Do you know how I might create more of a space/gap between the image and the heading on mobile? https://www.itsalllegalbaby.com/alb-library