HTML/ CSS/ JScript Issue

[Guest]

Hi i want to have an advert be hidden when viewed on a screen less than 960px (Mobile) i have the advert code within <div id="advert"> and want to be able to hide the whole elment, please help as i cant get anything to work.

 

EDIT: Pastebin: http://pastebin.com/rq6B8fHv

[Guest]

You'll need to provide your html, css, and jscript in pastebin.

[Guest]

You'll need to provide your html, css, and jscript in pastebin.

sorry have updated post

[Hazy125]

@media screen and (max-width: 960px) {    #advert {        display: none;    }}

This uses CSS3 only, so this goes in your styles. Given that it's CSS3 though, some particularly terrible browsers might now handle it. But most/all phone browsers should and that's all that really matters

 

EDIT: See basic working example here http://h125.co/f9d

[leodaniel]

I would also go with an CSS3 only solution! Use a Media Query:

@media screen and (max-width: 960px){   #advert{      position: absolute;      top:  -9999px;      left: -9999px;   }}

By using this solution, you keep the Media Accessible for ScreenReaders. If you use display:none, the media will be ignored by screen readers.