Flex not stacking properly on Safari

SOLVE
tommitchell
Contributor

Hi there

 

On this page https://info.goodlord.co/contract-generation (password pickles123) I'm attempting to ensure the circular images and corresponding text alternate in order on desktop but remain in the same order when stacked on mobile. In order to achieve this I have created a class '.benefitgroup' 

 

.benefitgroup > .row-fluid-wrapper > .row-fluid {
  
    display: -webkit-box !important;   
    display: -moz-box !important;      
    display: -ms-flexbox !important;   
    display: -webkit-flex !important;  
    display: flex !important;
    -webkit-flex-flow: row wrap !important;
    -moz-flex-flow: row wrap !important;
    -ms-flex-flow: row wrap !important;
    flex-flow: row wrap !important;


}

and I'm using .main-content and .sidebar on each element to order them consistently on mobile

 

 

 

  @media screen and (max-width:767px) {
.stack-row > .row-fluid-wrapper > .row-fluid{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .main-content{ order: 2; -webkit-order: 2; -moz-order: 2; -ms-order: 2; width: 100%; } .sidebar { order: 1; -webkit-order: 1; -moz-order: 1; -ms-order: 1; width: 100%; }

 

It's displaying fine on desktop on Chrome but Safari desktop won't align horizontally unless .benefitgroup is removed - which then prevents the mobile stacking from working in the correct order. I'd be really grateful if anyone can spot a reason why this might be happening, or if I'm doing something totally stupid!

 

Thanks very much

 

0 Upvotes
1 Accepted solution

Accepted Solutions
tommitchell
Solution
Contributor

I've now sorted this - please ignore!!

View solution in original post

0 Upvotes
2 Replies 2
tommitchell
Solution
Contributor

I've now sorted this - please ignore!!

View solution in original post

0 Upvotes
jennysowyrda
Community Manager

Thanks for sharing @tommitchell!

 

Do you mind sharing what your solution was?