iPad in portrait mode ignores CSS

When I go to this wordpress website, I'm building on an iPad in portrait mode, the iPad completely destroy my CSS styling. What am I doing wrong?
Here is an image of the iPad:

Here is an image of the website in google chrome developer mode in the same dimensions as the iPad:

I have tried with this CSS to force the iPad version to look normal:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait){
#wrapper { width: 100%!important;  margin: 0!important; }
section {position:relative!important;}
}

I also have these meta in the header:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">