1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Hide Footer On Mobile & Tablet

Discussion in 'HTML & Website Design' started by paul_whiting09, Jun 15, 2015.

  1. #1
    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.
     
    paul_whiting09, Jun 15, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,666
    Likes Received:
    1,983
    Best Answers:
    250
    Trophy Points:
    515
    #2
    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?!? :/
     
    deathshadow, Jun 15, 2015 IP
  3. Rahmat Sharifi

    Rahmat Sharifi Greenhorn

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    use bootstrap responsive, it is pretty simple
     
    Rahmat Sharifi, Jun 29, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,666
    Likes Received:
    1,983
    Best Answers:
    250
    Trophy Points:
    515
    #4
    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!
     
    deathshadow, Jun 30, 2015 IP
  5. Jufcy8200

    Jufcy8200 Banned

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    78
    #5
    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):
     
    Jufcy8200, Jun 30, 2015 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #6
    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
     
    kk5st, Jul 1, 2015 IP