html - CSS Flexbox on mobile messes up boxes -


i working on converting on flexbox , struggle lot. of so, able started , struggle part. works perfectly, far, except when view page on iphone 4 or samsung 3, messes up. on desktop, can resize , peachy, mobile, well, doesn't work well. have reduced as possible make shorter here. logo works fine, head_area , head_note drop underneath logo obviously. don't want. sure simple fix, daunting me @ moment. great appreciated.

*  {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;  }    html,body,address,blockquote,div,  form,fieldset,caption,  h1,h2,h3,h4,h5,h6,  hr,ul,li,ol,ul,dd,dt,  table,tr,td,th,p,img  {     margin: 0;     padding: 0;  }    img,fieldset  {     border: none;  }    body  {     color: #cf6;     margin: 0 auto;     font-size: 1.0em;     max-width: 1280px;     overflow-y: scroll;     text-transform: uppercase;     font-family: "tahoma", verdana, sans-serif;     background: #777 url(../homepics/homeback.jpg) top center;  }    #head_main  {     height: 112px;     margin-bottom: -112px;     border: 2px solid #444;     background: #555 url(../homepics/homemenu2.png) 0 0 repeat-x;  }    #head_wrap  {     width: 92%;     display: flex;     margin: 0 auto;     max-width: 84em;     flex-flow: row wrap;  }    #head_logo  {     top: 0;     left: 0;     width: 77px;     height: 90px;     height: 112px;     background: url(../homepics/homelogo.png) 0 0 no-repeat;  }    #head_area  {     flex: 2;     display: flex;     min-width: 5em;     flex-direction: column;  }    #head_info  {     color: #0ff;     height: 45px;     font: normal 125%/45px arial, helvetica, sans-serif;  }    #head_news  {     margin-top: 0;     padding: 0 10px;     font-weight: 600;  }    #head_news li  {     overflow: hidden;     white-space: nowrap;     text-overflow: ellipsis;  }    #head_note  {     top: 0;     width: 77px;     height: 112px;  }        @media (max-width: 40em)  {       #head_main     {        margin: 0;        padding: 0;        border: 1px solid pink;     }       #head_wrap     {        width: 100%;     }       #head_logo     {        border: 1px solid yellow;     }       #head_area     {        flex: auto;        display: flex;        -webkit-flex-direction: column;        border: 1px solid red;     }       .head_menu     {        border: 1px solid blue;     }       #head_info     {        border: 1px solid cyan;     }       #head_note     {        border: 1px solid orange;     }  }
<head>        <meta http-equiv="x-ua-compatible" content="ie=edge"/>        <meta name="viewport" content="width=device-width; initial-scale=1.0"/>  </head>         <body>        <!-- header -->        <header id="head_main">           <section id="head_wrap">                <article id="head_logo">              </article>                <article id="head_area">                 <div id="head_info">                    <!--  here  -->                 </div>                 <div class="head_menu">                    <!--  here  -->                 </div>              </article>                <article id="head_note">                 <!--  here  -->              </article>             </section>        </header>          <aside>           <!--  here  -->        </aside>          <footer>           <!--  here  -->        </footer>       </body>

you can use flex display bigger viewports only. way columns won't displayed side side, instead, 1 below other on tabs , mobiles. doing may help: 

.row {   display: flex; }  @media screen , (max-width: 1024px) {     .row {         display: initial !important;     } }

-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more