Skip to content
Sign UpLog In
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs
1

Why media queries are not working for iOS devices in WordPress?

hvaandres
hvaandres

0

We are currently working on the following template called Zackra and I'm currently using wp-engine as the main builder. The current situation that I have is that I build some media queries for mobile devices, and this code is working on Android devices but is not working on iOS devices. For this reason, I'm wondering if you have an existing issue with the CSS portion of your code or if it is something else that is affecting iOS devices.

Website: Yournextfence.com Image affected: The header from yournextfence.com

Steps that I took to build my media queries:

Min-device-width: 350 px Max-device-width: 768 px Min-device-width: 350 px Max-device-width: 812 px Min-device-width: 375 px Max-device-width: 667 px

Links from where I grabbed the sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

I tested this with multiple browsers:

Chrome Safari Mozilla

I cleared my cache and cookies, and I checked the console from the chrome tools and we don't have any issues related to the CSS.

This is how should look: https://screencast.com/t/4wr5lHytT9y

This is how it looks right now: https://screencast.com/t/9NVUDxKxhK

CSS Code that I used:

@media
only screen and (min-width: 350px) and (max-width: 768px) {
.background-image-main {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed;
}
.background-image-seclusions {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/trexlehiedit35.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.background-image-horizons {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-Horizons-Winchester-Grey-2.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.background-image-trex-gates {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2018/10/Trex-Seclusions-Fencing-with-Gate.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.background-image-trex-posts {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-With-IronGuard-15.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
}

@media
only screen
and (min-device-width: 350px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
.background-image-main {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.background-image-seclusions {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/trexlehiedit35.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.background-image-horizons {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-Horizons-Winchester-Grey-2.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.background-image-trex-gates {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2018/10/Trex-Seclusions-Fencing-with-Gate.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
.background-image-trex-posts {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-With-IronGuard-15.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
}

/* Iphone X in potrait */

@media
only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.background-image-main {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
}

@media
only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.background-image-main {
background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg)!important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
}
}

3 years ago

Voters

Comments

TopNew
3
hyperupcall
hyperupcall

my best guess is that -webkit-min-device-pixel-ratio is not what you would expect. i can't see any issues with the queries myself

3 years ago
1
hvaandres
hvaandres

@eankeen
Thanks for your answer, I will try something else since this is the first time that I'm having an issue like that!

3 years ago
Load more