Search code examples
htmlcssmaterialize

show static ad space only for large screen in materialize css


part one is responsive but ad space is not responsive here. then how to show this ad-space?

<div class="row">
 <div class="col s12 m12 l10">
    <!--part one-->
 </div>
 <div class="hide-on-med-and-down showAdPart">
    <!-- 300x600 ad space--> 
 </div>
</div>

Solution

  • use l12 class for 100% or your width and follow like,

     <div class="col s12 m12 l12 partOne">
        <!--part one-->
     </div>
     <div class="hide-on-med-and-down showAdPart">
        <!-- 300x600 ad space--> 
     </div>
    

    css : use calc()

    @media screen and (min-width: 993px){   /* large screen */
      .partOne.col.l12{
          width: -webkit-calc(100% - 300px);
          width:    -moz-calc(100% - 300px);
          width:         calc(100% - 300px);
     }
    }