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;
}
}
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?
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
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
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
@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 “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Thank you so much!!! It works!!!
