i'm having issue areas of website i'm in middle of developing have used flexbox layout. ios9 device, i'd love if go www.sparkles-cakes-of-art.co.uk , see issues first hand. pages in question are: homepage, page, , menu.
this issue doesn't happen on android phones, or desktop.
here screenshots of issue if not have device see first hand:
here css should affecting it
.flex { display:-webkit-box; display:-ms-flexbox; display:flex; } .half { -webkit-box-flex: 50%; -ms-flex: 50%; flex: 50%; } .cake-images { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin:20px 0px; } relevant html homepage issue. if can find out wrong should able figure out other pages:
<section class="flex"> <article class="half"> <p>blah!</p> </article> <blockquote class="half main-quote"> <img src="img/quote-in.png" class="quote-in"/> <p class="quote">blah</p> <cite class="cite">blah</cite> <img src="img/quote-out.png" class="quote-out"/> </blockquote> </section> <section class="flex cake-images"> <div class="main-cake-img"> <div class="hidden-hover"> <h2>weddings</h2> </div> <a href="gallery#weddings"> <img src="img/cake-01.png" alt="" /> </a> </div> <div class="main-cake-img"> <div class="hidden-hover"> <h2>birthdays</h2> </div> <a href="gallery#birthdays"> <img src="img/cake-02.png" alt="" /> </a> </div> <div class="main-cake-img"> <div class="hidden-hover"> <h2>simplicity offer</h2> </div> <a href="gallery#offer"> <img src="img/cake-03.png" alt="" /> </a> </div> </section> sorry can't post more screenshots because of rep limit.
found issue.
in media query phone devices had this:
.half { flex: 100%; } i thought make element go 100% width, have 1 column. break on ios safari. instead use flex: 0 0 0; achieve same effect.
Comments
Post a Comment