How to hide this css in responsive layout?

Hello guys,

Can someone teach me how can I disable the following code to not appear in my responsive layout?

<div id="supportAd"><strong><u>NEWS</u>:</strong> Testing....</div>

Code (markup):

#supportAd {
    background: #222;
    border: solid 1px #a0a0a0;
    width: 933px;
    margin: 0 0 12px 10px;
    line-height: 20px;
    height: 39px;
    text-align: center;
    font-size: 14px;
    color: #ccc
}
#supportAd a {
    color: #ff0000;
}

Code (markup):

Thanks

 

Do you mean on any responsive site? In that case,

#supportAd {display: none;}

Code (markup):

If you mean for smaller screen devices, say for anything with widths less than or equal to 800px,

@media (max-width: 800px) {
    #supportAd {
        display: none;}}

Code (markup):

If that doesn't get it, you need to come back with more specifics.

cheers,
gary

 

Past this Code in your css file

@media (max-width: 800px and min-width: 300px) {
    #supportAd {
        display: none;}}

Code (CSS):

 

NOT that media queries should be done in pixels since much like declaring fonts in pixels that means you're probably doing something mind-numbingly wrong in the layout -- like pissing on accessibility from so on-high you'd think the Almighty just got back from a kegger

@yeadh, what's the min for?

@Divvy -- Really that entire snippet of CSS throws up warning signs for me -- fixed pixel width, fixed pixel metric fonts, fixed pixel paddings, fixed height... laundry list of how NOT so style something... and that's before talking the markup with the strong tag probably doing a numbered headings job, the <u> tag that has no business in any HTML written after 1997, etc, etc...

IF the rest of the page is like that, you probably need to start over from scratch.

 

Thank you guys, that worked great!

What I used:

@media screen and (max-width: 980px) {
    #supportAd {
        display: none;
    }
}
#supportAd {
    background: #222;
    border: solid 1px #a0a0a0;
    width: 933px;
    margin: 0 0 12px 10px;
    line-height: 35px;
    height: 39px;
    text-align: center;
    font-size: 14px;
    color: #ccc
}
#supportAd a {
    color: #ff0000;
}

Code (CSS):

deathshadow, what do you mean? I have issues in my code?
But everything seems to work fine in my site... maybe you need to check how this is displaying in my website to know what I am doing. If you want, I can pm you my website url.

 

What he's talking about is accessibility - using px (static values) for things that should scale depending on what the user-preference is, is a bad way to code.
However, @deathshadow is a bit of a stickler on this, and a bit set in his ways
For instance, having px-based media-targets isn't great, but it usually works just fine - the majority of the population do not alter their smart-phone's standard setup when it comes to font-size and such, and hence, @media-targets aiming for the cut-off points based on max-size is usually fairly safe - not smart, but fairly safe.
As for the <u>-element, it's deprecated (or, have been, I think it's back in HTML 5) - it's unnecessary, just style the surrounding <strong>-tag with text-decoration: underline;
As for the site, it works, but have you tested it in a plethora of resolutions, on different browsers and platforms (Firefox, Opera, Safari, Chrome, IE and Edge) on (*nix, Windows, Mac (where the browsers exist)) and have you tried running the site through a text-only browser, or ran it through aural browsing? Tested it on different phones and tablets? It's quite tiresome to do extensive testing, hence most often it's a bit of testing on your development platform (often Windows), with maybe 3-4 different browsers, and maybe resizing / reloading the window to test how it looks on small screens. Not always enough.

 

PoPSiCLe, thank you for your reply and for your explanation
I already did all of that and my site works fine in all resolutions.

 

Likely because I'm a large font/120dpi/20px/125%/Win7 medium/whateverThe***theyAreCallingItThisWeek user, so I see the broken sites all the time, particularly when forced to dive for the zoom thanks to the uselessly illegibly tiny fonts. I also see the full colour spectrum in all intensities which is why I'm hypersensitive to illegible colour contrasts. (and find colour syntax highlighting in editors to be an illegible acid-trip)

Actually quite unsafe, as it can result in the mobile layout tripping when it shouldn't on desktop, particularly if you do something really stupid like use dynamic fonts (em) inside a pixel width. You should use EM's for fonts, paddings and max-width so you don't screw over desktop users. If you use them there, you HAVE to use them on the media queries so they account for that difference on desktop... or nettbooks. NOWHERE are pixel based mobile more broken than netbooks or UMPC's. Well, that and high dpi setups where zoom is unfavorable and/or broken thanks to developer ineptitude.

We have the web content accessibility guidelines for a reason -- Joe forbid anyone pay attention to them. It says use EM, so ***ing use EM. It says to use legible colour contrasts, so do the math and use legible colour contrasts regardless of what some artsy fartsy PSD jockey may be under the delusion qualifies them to be a "designer".

Or to put it more succinctly, put me in a room with most designers and we play out the scene between the Sheriff and "the Dude". I don't much care for their ****-off PSD's, their ****-off colours, their ****-off webfonts, their ****-off form over function mentality, and I don't much care for them... ****-offs.