I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen.
Below is the code I have:
<style>
/* default height */
#ad {
height: 660px;
width: 100%;
}
@media only screen and (height:90px) {
/* 90 pixels high */
#ad {
height: 690px;
width: 100%;
}
}
@media only screen and (height:125px) {
/* 125 pixels high */
#ad {
height: 125px;
width: 100%;
}
}
.kk {
background-image: url(/product/ProductDevelopmentBanner.jpg?expires=31536000) !important;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>
<section id="ad" class="kk" style="height : 660px; width: 100%">
// The class kk displays the banner within this section
</section>Currently, the banner displays perfectly on a computer's full screen but fails to render correctly on mobile devices or tablets.