My css code does not on IOS

Store Design
,

Topic summary

CSS media query for mobile (max-width: 767px) styles work on Android but not on iOS devices.

  • Code shared (central to the issue): inside @media only screen and (max-width: 767px), .product-supp ort-block is set to width/height 100px; .dt-sc-support-blocks-section .dt-sc-support-block uses display:flex, height:100%, flex-wrap:wrap, and margin-top:15px.
  • Support requested access to test; the merchant provided the store URL and password.
  • Support advised editing the Shopify theme: Online Store > Themes > Edit Code > theme.liquid, and to insert code above . However, the provided code block is empty, so the exact snippet to add is missing/unclear.

Status and outcome:

  • No confirmation that the CSS issue on iOS is resolved.
  • The discussion remains open, pending a concrete code snippet from support or further iOS testing with the provided store access.
Summarized with AI on December 30. AI used: gpt-5.
1

Hi, I have a problem with my CSS code.
When I enter this code, it only works on Android and not Apple.

@media only screen and (max-width: 767px) {
.product-support-block {
width: 100px;
height: 100px;
}

.dt-sc-support-blocks-section .dt-sc-support-block {
margin-top: 15px;
display: flex;
height: 100%;
flex-wrap: wrap;
}
}
2

Hello @mountainsap

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Could you share the link to your store and let me test it out?

1 Like
3

Hi, thanks for the answer.

link: https://www.zoopetworld.com/
password: Zoopetworld2024

Thanks

4

Hello @mountainsap

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store → Themes → Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

2 Likes