Safari on iOS is Not Respecting CSS to Display 2 Columns On Mobile and is Cutting Off Instead

[Cypress_Photo_Camper]

The website is https://cypressphotocamper.com/

Header
Rev Slider
Section 1
Section 2 <–This section with the 4 awards at the bottom

I added the following CSS to have it display as 2 columns on mobile

@media (max-width: 979px) {
.x-column {
float: left !important;
width: 48% !important;
margin-right: 4% !important;
}
.x-column:nth-child(2n) {
margin-right: 0px !important;
}
.x-column.x-1-1 {
float: none !important;
width: 100% !important;
margin: 0 auto !important;
}
.x-column.x-1-2 {
float: none !important;
width: 100% !important;
margin: 0 auto !important;
}
}

However it isn’t working on ios safari and instead cuts off all the awards. Any help is greatly appreciated.

[christian]

Hey Scott,

I’m sorry but we cannot provide support for custom codes or theme modifications as part of theme support. Please consider subscribing to One where we can provide customization guidance.

Thank you for understanding.