CSS Code Suddenly Stopped Working For Mobile

Hi, 

My CSS code for showing a different, optimised image for mobile viewers has suddenly stopped working. It has been working fine for the past month or so. I haven't changed anything so I'm unsure why this has happened. 

Has anyone had this problem before?

Here is the code:

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-637ca4d8419b7118a6df69d9 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/513c5495-82aa-44f2-82b3-a2d46a2b7380/TFC+tablet.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-637ca4d8419b7118a6df69d9 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/5ac2496e-2fc9-456e-939c-872c720f39de/TFC+HP+Header+%28Mobile%29+%282%29.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
  
/* Insert Code for Mobile Above This Line */
}
@media screen and (max-width:767px) {
.header-actions.header-actions--right {
    display: block !important;
}

.header-actions-action.header-actions-action--cta {
    display: block;
    position: relative;
    left: -30px;
}

.header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 150px") !important;
}
}
/* Hide overlay cta button */
body.header--menu-open .header-menu-cta {
    display: none;
}
#collection-6492f0649d4d621388aa95bb #page .page-section:nth-of-type(1) {
  .content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
 }
  .sqs-block-image {
    margin-top: 2vw; 
    width: 100vw;
  }
}

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-6492f0649d4d621388aa95bb {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/acad0e43-763a-4fda-b726-447272797347/TFC+HWH+Mobile+2.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-6492f0649d4d621388aa95bb {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/acad0e43-763a-4fda-b726-447272797347/TFC+HWH+Mobile+2.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
  
/* Insert Code for Mobile Above This Line */
}
@media only screen and (min-width:769px) {
div#block-yui_3_17_2_1_1687941292473_18554>.sqs-block-content:first-child {
   display: none;
}
  /* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";
/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-6492edf2b9772729c092f5af {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/7f049fd3-ecb2-4bec-a526-21b94e58938b/FAQ+tablet+%281%29.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Tablet Above This Line */
}
}
/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-6492edf2b9772729c092f5af {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/59544902-193c-44ec-978b-0cf79f5f12ee/FAQ+Mobile+%28resize+2%29.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Mobile Above This Line */
}
@media only screen and (min-width:769px) {
div#block-yui_3_17_2_1_1687941292473_21455>.sqs-block-content:first-child {
   display: none;
}
}
/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-647872d5136c036fd76c28ca {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/9c781114-5c6e-45a5-b2be-c181178bf8a2/Media+Mobile.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-647872d5136c036fd76c28ca {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/9c781114-5c6e-45a5-b2be-c181178bf8a2/Media+Mobile.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Mobile Above This Line */
}@media only screen and (min-width:769px) {
div#block-yui_3_17_2_1_1687448307390_11779>.sqs-block-content:first-child {
   display: none;
}
}/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-64931fca030549796ceb6101 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/7ee40396-5e83-4be0-997b-8a0cfaede1d1/Petition+Mobile.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
  
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-64931fca030549796ceb6101 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/7ee40396-5e83-4be0-997b-8a0cfaede1d1/Petition+Mobile.png?content-type=image%2Fpng");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
  
/* Insert Code for Mobile Above This Line */
}
@media only screen and (min-width:769px) {
div#block-yui_3_17_2_1_1687448307390_17014>.sqs-block-content:first-child {
   display: none;
}
}
.pagination-title-wrapper{
  display:none;
}
.item-pagination-icon{
  display:none;
}

Please include a working link (a “URL”) for your site. 

Hi Paul, 

I've just added it, let me know if it isn't coming up.

Thanks.

What is your site url? We can check easier

https://www.timeforchangecoalition.co.uk/

15 hours ago, AML_ said:

https://www.timeforchangecoalition.co.uk/

You need this image show in fullsize?

On 7/22/2023 at 4:03 AM, tuanphan said:

You need this image show in fullsize?

Yes please, it was showing this image on mobile devices, which looked great: https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/5ac2496e-2fc9-456e-939c-872c720f39de/TFC+HP+Header+(Mobile)+(2).png?content-type=image%2Fpng

19 hours ago, AML_ said:

Yes please, it was showing this image on mobile devices, which looked great: https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/5ac2496e-2fc9-456e-939c-872c720f39de/TFC+HP+Header+(Mobile)+(2).png?content-type=image%2Fpng

Add to Design > Custom CSS

/* resize mobile image */
@media screen and (max-width:767px) {
[data-section-id="637ca4d8419b7118a6df69dc"] {
    min-height: unset !important;
    height: 30vh;
}
}

Thank you, this has worked in that it's resized the image. But, is there a way to have it show a specific image instead?

I've changed the code to the below but it isn't working:

/* Show a specific image on mobile */
@media screen and (max-width: 767px) {
  [data-section-id="637ca4d8419b7118a6df69dc"] {
    min-height: unset !important;
    height: 30vh;
    background-image: url("https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/5ac2496e-2fc9-456e-939c-872c720f39de/TFC+HP+Header+%28Mobile%29+%282%29.png?content-type=image%2Fpng");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Thank you! This worked. 

I really appreciate it.