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
Post a Comment