CSS targeting iPad Pro 12.9 in Portrait not working

Question

We have the following CSS which works for all iPads except for iPad Pro 12.9:

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
  
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 10px;)
}
    
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait */

@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 834px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 0;)
}
    
/* ----------- iPad Pro 11 2018 " ----------- */
/* Portrait */
    
@media only screen
and (min-width: 834px)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

/* ----------- iPad Pro 11 2020 " ----------- */

@media only screen
and (min-width: 834px)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

/* ----------- iPad Pro 11 2021 " ----------- */
    
@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 0;}
}

/* ----------- iPad Pro 9 " ----------- */
/* Portrait */
    
@media only screen
and (min-width: 1024px)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 10px;}
}

/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
  
@media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

Our site https://mandoemedia.com displays with a gap above one of the buttons on an iPad Pro 12.9:

which is produced by CSS:

.pp-button-1 {
    margin-bottom: 10px;
}

Note the last CSS rule which targets iPad Pro 12.9 taken from this page:

/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
  
@media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    .pp-button-1 {margin-bottom: 0;}
}

However this margin-bottom: 0; is not taking effect.

EDIT: What is taking effect is:

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .pp-button-1 {margin-bottom: 10px;)
}

Why is the iPad 3, 4 and Pro 9.7" media query active for an iPad Pro 12.9?

Answer 1

I think the below should work, attaching screenshots.

.padding-20-20.mobile-centered {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}