CSS Code Suddenly Stopped Working For Mobile

AML_ · July 19

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

Edited July 19 by AML_
Added URL

paul2009 · July 19

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

AML_ · July 19

Hi Paul,

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

Thanks.

tuanphan · July 21

What is your site url? We can check easier

AML_ · July 21

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

tuanphan · July 22

15 hours ago, AML_ said:

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

You need this image show in fullsize?

AML_ · July 24

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

tuanphan · July 25

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

AML_ · July 25

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

tuanphan · July 26

Use this code

/* resize mobile image */
@media screen and (max-width:767px) {
[data-section-id="637ca4d8419b7118a6df69dc"] .section-border img {
    content: 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);
}
}

AML_ · July 26

Thank you! This worked.

I really appreciate it.

CSS Code Suddenly Stopped Working For Mobile

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009

AML_

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources