Solved

Css code works only on android and not on apple

giacomo91
New Member
4 0 0

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) {
.home-support-block
.dt-sc-support-blocks-section
.dt-sc-support-block
.dt-sc-support-icon-image {
width: 93px;
height: 93px;
}
.dt-sc-column.five-column {
display: ruby-text !important;
}
.dt-sc-support-blocks-section .dt-sc-support-block {
margin-top: 15px;
width: 49%;
display: flex;
height: 100%;
flex-wrap: wrap;
}
}

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2116 605 470

This is an accepted solution.

@giacomo91 Oh, there's a better way to achieve that. Just follow the instructions below

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .dt-sc-support-blocks-section.dt-sc-column.dt-sc-grid-style.six-column.default-style.position-default {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .dt-sc-support-icon-image,
    .dt-sc-support-icon-image img {
        height: auto !important;
        width: fit-content !important;
        aspect-ratio: 1 !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712833778360.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2116 605 470

Some CSS code are not supported by Apple or have alternatives. What are you trying to achieve and where? Could you share the link to your store and let me test it out?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
giacomo91
New Member
4 0 0

Hi, thanks for the answer.
However I would like to create in this section (see annex) 2 columns by reducing the icons like this screen (see annex 2)

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

Thanks

 

Annex-1.jpgAnnex-2.png

ThePrimeWeb
Shopify Partner
2116 605 470

This is an accepted solution.

@giacomo91 Oh, there's a better way to achieve that. Just follow the instructions below

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .dt-sc-support-blocks-section.dt-sc-column.dt-sc-grid-style.six-column.default-style.position-default {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .dt-sc-support-icon-image,
    .dt-sc-support-icon-image img {
        height: auto !important;
        width: fit-content !important;
        aspect-ratio: 1 !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712833778360.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
giacomo91
New Member
4 0 0

Thank you so much!!! It works!!!

PageFly-Oliver
Astronaut
878 190 171

Hi @giacomo91 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

@supports (-webkit-touch-callout: none) {
 @media(max-width:767px){
 .home-support-block
.dt-sc-support-blocks-section
.dt-sc-support-block
.dt-sc-support-icon-image {
width: 93px;
height: 93px;
}
.dt-sc-column.five-column {
display: ruby-text !important;
}
.dt-sc-support-blocks-section .dt-sc-support-block {
margin-top: 15px;
width: 49%;
display: flex;
height: 100%;
flex-wrap: wrap;
}
 }
}

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

giacomo91
New Member
4 0 0

Hi, thanks for the answer.
Could you tell me exactly where to paste the code into the theme.liquid file? Because I tried it but it didn’t work.

Thanks