html - How do I input media query that removes fixed banner on the top and replaces it with mobile one? -




i working on media query have original banner desktop removed (i have used display: none;), , replaced banner mobile uses. please refer code below:

<div class="headercontainer">                             <img class="banner" src="web-banner.gif"/>                             <img class="banner-phone" src="phone-img.jpg"/>                         <div class="complogo"> 

i having issues inputing media query remove fixed position of banner , replace mobile one. apologies if have skipped something, quite fresh web development.

.headercontainer {                  background-color:#000!important;                 border-bottom: 0 none;                 box-sizing: border-box;                 margin: 0 auto;                 max-width: 1000px;                 padding: 0 1%;                 position: fixed;                 top: 0;                 z-index: 100;                 height: 110px!important; 

any suggestions?

you can use 2 media queries, 1 set position:fixed desktop 1 mobile devices:

.headercontainer {   background-color:#000!important;   border-bottom: 0 none;   box-sizing: border-box;   margin: 0 auto;   max-width: 1000px;   padding: 0 1%;   top: 0;   z-index: 100;   height: 110px!important; }  /* media query sizes examples */ @media (min-width: 100px) {   .headercontainer {     position: absolute;   } }  @media (min-width: 1024px) {   .headercontainer {     position: fixed;   } } 




wiki

Comments

Popular posts from this blog

python - Read npy file directly from S3 StreamingBody -

python - Minimize function with Scipy minimize -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -