0
 .rq-search-container {
    position: relative;
    width: 100%;
    background: white;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-radius: 2px;
    z-index: 30;
    -webkit-flex: 1 0 15em;
  }

It's perfectly working with chrome, Mozilla browsers but not working in Safari browser.

I was already tried many ways like -web-kit-flex, etc. but not working. please suggest me!

splash
  • 13,037
  • 1
  • 44
  • 67
Prasanna Raja
  • 71
  • 1
  • 9
  • Try add `display:-webkit-flex ` – duan Jul 04 '17 at 06:25
  • 1
    vendor prefixes css properties should be written above the standard css properties. – Mr_Green Jul 04 '17 at 06:42
  • If you're writing CSS in a daily basis, [Autoprefixer](https://github.com/postcss/autoprefixer) is a must-have (with a Browserslist configuration). You won't have to care about those prefixes and won't be _able_ to forget one (or add one not neceessary or that has never existed), write in a non-functional order, have to remove manually when you don't support some (now) old browser, etc Needs some tooling but there's a reason why it's used by so many devs ^^ – FelipeAls Jul 04 '17 at 08:30

1 Answers1

1

Try this style display:-webkit-flex

similarly for all the browser use below css

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

Your code

.rq-search-container {

 position: relative;
 width: 100%;
 background: #fff; 
 display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -ms-flexbox;  /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
 display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
 flex-direction: row; 
 align-items: flex-start;
 border-radius: 2px; 
 /*box-shadow: 0px 0px 28px 5px rgba(0, 0, 0, 0.3); margin-top: 45px;*/ 
 z-index: 30;

}
Dinesh undefined
  • 5,490
  • 2
  • 19
  • 40