0

I'm quite new to development, and I've spent today building out my portfolio using Flexbox. All seems to be working fine except in Safari. I've included -webkit- in what I think are the appropriate places, but is there something I'm missing?

Problem I'm facing is that the thumbnails in my gallery always display in a column in Safari, rather than in a row when the media query kicks in. Seems to be working fine in Chrome and Firefox, and caniuse seems to suggest Flexbox should work with Safari.

Code I thought would be related is below. I've also put my full code at https://github.com/codedbyrob/portfolio. I've included the JavaScript files I've been working with too just in case, but I thought the problem was probably in 'main.css'.

<ul id="gallery">
      <li>
        **Project thumbnail and description here. Multiple list-items showing other projects below**
      </li>`
</ul>


#gallery {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
margin: 0 auto;
padding: 0 5%;
padding-top: 2.5%;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;}



@media all and (min-width: 769px) {

    #gallery {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;}

Rob

Robkwood
  • 345
  • 3
  • 5
  • 17
  • Safari does have a problem with `flex-wrap`. Besides, your CSS is not properly prefixed. Unprefix it and than run it through [autoprefixer](https://autoprefixer.github.io/) using `> 0.01%` as filter. – tao May 07 '16 at 19:51
  • @Michael_B thanks very much for your help. Fixed it by replacing a max-width declaration with flex equivalent. Wouldn't have thought of that! – Robkwood May 07 '16 at 21:02
  • @AndreiGheorghiu thank you for pointing me towards autoprefixer too. Very helpful! – Robkwood May 07 '16 at 21:04

0 Answers0