CODEWITHSUNDEEP
javascriptjqueryhtmlcss
roey jinrey
roey jinrey

Reputation: 1

Hide Advertising Banner in Mobile View

I got stuck to solve this.

its working, it can hide banner in mobile view. but there are somtething wrong. the banner show behind from my content site. its look like the banner gonna be background of my site.

please anyone help me.

#largeAds {
    width:728px;
    height: 90px;
    line-height: 90px;
    margin: 0 auto;
    background: #ccc;
    text-align: center;
}

    #smallAds{
    display: none;
    margin: 0 auto;
    width: 468px;
    height: 60px;
    line-height: 60px;
    background: #333;
    color: #fff;
    text-align: center;
}

    @media screen and (max-width: 750px) { 
    #largeAds { display: none }
    #smallAds{display: block;}
}
<div id="largeAds">Large ads (728 x 90)</div>
<div id="smallAds">Small ads (468 x 60)</div>

Upvotes: 0

Views: 186

Answers (2)

Nik Hendricks
Nik Hendricks

Reputation: 294

I am not sure if this is what you are looking for but it will work 

<link rel='stylesheet' media='screen and (min-width: 750px) and (max-width: 99999px)' href='css/large.css' />
<link rel='stylesheet' media='screen and (min-width: 468px) and (max-width: 750px)' href='css/medium.css' />

now if you put your individual css in those it will load perfectly i use this for all of my sites :) i hope this helps you out

Upvotes: 0

Raru
Raru

Reputation: 381

I hope this will help you!

@media only screen and (max-width: 720px) {
  #largeAds { display: none ! important }
  #smallAds{display: block; ! important}
}

Upvotes: 1

Related Questions