i trying hide div , display according users screen size. hide 1 header on desktop , display another, vice versa mobile. trying.
this asp have both of headers.
<div id="headercontainer" class="container a" style="background-color: white;"> <div class="row" style="text-align: center;"> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <img src="images/jdc logo no border jpg smaller.png" class="img-responsive" style=" padding-top: 4%;" alt="jd&c services logo - header image"/> <!--img-responsive--> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <button id="btn_home" class="headerbuttons hvr-underline-from-center " runat="server" onserverclick="btn_home_serverclick">home</button> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <button id="btn_ohs" class="headerbuttons hvr-underline-from-center " runat="server" onserverclick="btn_ohs_serverclick" href="safety.aspx" >safety</button> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <button id="btn_services" class="headerbuttons hvr-underline-from-center " runat="server" onserverclick="btn_services_serverclick" >services</button> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <button id="btn_careers" class="headerbuttons hvr-underline-from-center headerpadding" runat="server" onserverclick="btn_careers_serverclick">careers</button> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <button id="btn_contact" class="headerbuttons hvr-underline-from-center " runat="server" onserverclick="btn_contact_serverclick">contact</button> </div> </div> <div id="expandableheader2" data-role="main" class="ui-content"> <div data-role="collapsible" id="expandableheader"> <h1><i class="fa fa-bars"></i></h1> <p>i'm expanded content.</p> </div> </div> this css using hide , display headers.
@media screen , (max-width: 1240px){ #expandableheader{ display: inline !important; visibility: visible; } #expandableheader2{ display: inline !important; visibility: visible; } #headercontainer{ display: none; visibility: hidden; } } @media screen , (min-width: 1241px){ #expandableheader, #expandableheader2{ display: none; visibility: hidden; } } so issue having on desktop works fine. able hide expandable header, , display main header fine. on mobile not working fully. on mobile, main header becomes hidden, expandable header not shown. not sure happening.
you missing "headercontainer" </div>
just add </div> before
<div id="expandableheader2" data-role="main" class="ui-content"> sample: http://jsfiddle.net/jdjor7nm/
Comments
Post a Comment