Attempting to resolve the issue of site content overlapping with the background slider plugin on a WordPress website, I have encountered conflicting media queries for different devices. While it may work perfectly on mobile devices, it can create problems on iPads or in landscape mode.
Here are the CSS media queries I am currently using:
/*------ MEDIA QUERIES------ */
/* iPhone 6/7 Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -970px !important;
}
.nivoSlider {
top: 40px;
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
}
/* iPhone 6/7 Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -110px !important;
}
.nivoSlider {
top: 40px;
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
.site-content {
margin-top: -320px !important;
}
}