Code for Banner in the index (homepage) fitting to screen for all devices

Highlighted
New Member
1 0 0

Right now, I have a gif set for mobile (hidden from desktop devices)
On all other devices a banner shows up (hidden from mobile)
However, the banner is not fitting to screen on all devices (laptop, desktop, etc.)
Is there a way I should modify my code? 

I'm using simple 9 theme with a lot of custom coding. 

This is the code I'm using for the mobile gif/ desktop banner (just changed the linked image/gif code for privacy):

 

<style>
}
.mobile-video{
display: block;
}
.desktop-image{
display: none;
}
@media (min-width:992px) {
.mobile-video{
display: none;
}
.desktop-image{
display: block;
}
</p></h2></div>
</style>
<div class="container">
<div class="mobile-video">
<img src="https://cdn.shopify.com/s/files/gifPost_1.gif?v=16055">
</div>
<div class="desktop-image">
<img src="https://cdn.shopify.com/s/files/Banner_Computer_1.jpg?v=1605545735"width="1400" length="875">
</div>
<section class="mainWrap_cont">

 

 

Could use suggestions, advice, codes, etc.! Thanks!

0 Likes