Hide Footer On Mobile & Tablet

I am wanting to hide my footer on mobile and tablet devices. I have looked all over google for some help but haven't found anything. The HTML code for my footer is,

<!-- Footer --><footerclass="footer"role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer')?'-fluid':'');?>">
<jdoc:includetype="modules"name="footer"style="none"/><divclass="footer">
&copy; <?php echo date('Y');?><?php echo $sitename;?></div>

Code (markup):

My css code is,

.footer {
background-color:#F6861F;
color:#fff;
padding:20px0;
margin-bottom:0
text-align: center;
overflow: hidden;
width:100%;}

Code (markup):

Thankyou for any help.

 

I'm hoping your copy/paste neutered out some of the spaces in the markup, otherwise that's gibberish -- though really if you are dicking around setting classes on a FOOTER with PHP, you're probably doing something wrong.

Not sure I'd hide it, usually hiding content means there's something wrong with the content, but if one were to do so what you are looking for are called "media queries"

@media (max-width:32em) { .footer { display:none; } }

For example would hide everything inside .footer when the screen is smaller than 32em wide. TYPICALLY you want your media queries to trigger via an elastic width since your content and layout should also be elastic.

NOT that having a class name the same as the tag name serves much legitimate purpose, but IMHO the HTML 5tardery serves no legitimate purpose anyways if you know how to use numbered headings and horizontal rules properly. That markup is terrifyingly bad, much less all the php for nothing garbage mixed into it. Even the comment is halfwit nonsense -- REALLY? A footer tag with the class footer is the start of the footer needing a comment that says "Footer"?!? REALLY?!? :/

 

use bootstrap responsive, it is pretty simple

 

If by "simple" you mean writing more code, learning extra crap that just develops bad development habits, using classes in a presentational manner like those OOCSS halfwits, in general pissing away the very reason HTML and CSS exists much less accessibility whilst bloating out the page for nothing apart from covering up developer ignorance and ineptitude.

There's a reason it's jokingly called bootcrap, and anyone using it really needs to find a stick to go scrape it off with; that by itself it is nearly three times the size of what a single pages markup plus an enitre site's CSS should total should be warning enough to NEVER use any such framework bull apart from complete ignorance of what HTML is, what CSS is, what they are for, and how to use them.

Developers are dumber for "frameworks" like bootcrap even EXISTING!

 

Try this

.footer {
display: none;}

@media(min-width:992px){.footer {
display: block;
background-color:#F6861F;
color:#fff;
padding:20px0;
margin-bottom:0
text-align: center;
overflow: hidden;
width:100%;}}

Code (CSS):

 

That's pretty much what @deathshadow has already said, except backwards. It is more robust and intuitive to default to the desktop (most laptops and bunches of tablets, too), then pare and rearrange as you reach breaking points while reducing the viewport width.

I suspect that the direction you chose is only because you haven't yet thought things through, or you were seduced by the shiny of some platform, template or another and got sidetracked. If it's the latter, I hope you will take your spoon and back out of the sty. If there is, indeed, some pearl in the tons of pig poop, let someone else dig for it. Life is too short.

cheers,

gary