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

how to prompt save As Box in Excel Interlop c# MVC 4 -

i want export excel sheet using excel interloop... i have datatable convert excel sheet... now there way save file using save dialogue box in mvc 4 here code public string datatabletoexcel(datatable dt, string htmlheading, string key) { try { microsoft.office.interop.excel.application excel; microsoft.office.interop.excel.workbook excelworkbook; microsoft.office.interop.excel.worksheet excelsheet; microsoft.office.interop.excel.range excelcellrange; excel = new microsoft.office.interop.excel.application(); excel.visible = false; excel.displayalerts = false; excelworkbook = excel.workbooks.add(type.missing); excelsheet = (microsoft.office.interop.excel.worksheet)excelworkbook.activesheet; excelsheet.name = "sheet1"; dataset ...
Read more

xslt 1.0 - How to access or retrieve mets content of an item from another item? -

my use case have item has link in item. example, item 123456789/152 has metadata field dc.relation.hasversion=123456789/717 . within item view of 123456789/152 , how can retrieve values of metadata of 123456789/717 ? example, want retrieve dc.language.iso value of 123456789/717 123456789/152 . i looked @ related items feature in dspace don't know how metadata displayed in related items list pulled items in list. i using dspace version 5.3 mirage 2 theme . edit based on schweerelos answer, below actual code. using custom metadata field dc.relation.languageversion . basically, want link other version instead of displaying value, display dc.language.iso of other version in item-view.xsl . i've incorporated answer of schweerelos question in code just displaying value of dc.relation.languageversion . sample values of dc.relation.languageversion 10665.1/9843 ; 10665.1/9844 ie not complete uri handle. thanks in advance! actual code <xsl:template name=...
Read more