Responsive issue

Hi
i need to hide an element (#headClaim) for medium and small screens.
it works with my Firefox Developer and on some testdevices but not on my Ipad.
If the Ipad is in landscape-mode it works.
In Portrait-mode it doesnt.
Why?

/* für Viewport-Breiten von 0px bis einschließlich 319px */
@media (max-width: 319px) {
#headClaim {
 display: none !important;}
 
}

/* für Viewport-Breiten von 320px bis einschließlich 479px */
@media (min-width: 320px) and (max-width: 479px) {
#headClaim {
 display: none !important;}
}

/* für Viewport-Breiten von 480px bis einschließlich 767px */
@media (min-width: 480px) and (max-width: 767px) {
#headClaim {
 display: none !important;}
}

/* für Viewport-Breiten von 768px bis einschließlich 854px (Tablet S3) */
@media (min-width: 768px) and (max-width: 854px) {
#headClaim {
 display: none !important;}
}

/* für Viewport-Breiten von 855px bis einschließlich 1023px */
@media (min-width: 855px) and (max-width: 1023px) {
#headClaim {
 display: none !important;}

}

/* für Viewport-Breiten von 1024px bis einschließlich 1180px */
@media (min-width: 1024px) and (max-width: 1180px) {
} 

/* für Viewport-Breiten von 1024px bis einschließlich 1180px */
@media (min-width: 1181px) {
}