CODEWITHSUNDEEP
htmlcssjoomlafooter
Endô Fujimoto
Endô Fujimoto

Reputation: 311

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 -->
    <footer class="footer" role="contentinfo">
        <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
            <jdoc:include type="modules" name="footer" style="none" />
          <div class="footer">
&copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
            </div>

CSS code for my footer is,

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

Upvotes: 5

Views: 6558

Answers (6)

TechsBucket
TechsBucket

Reputation: 21

You should try this CSS code.

@media only screen and (max-width: 767px) {
  .footer {
    display: none;
  }
}

Upvotes: 0

Rodney
Rodney

Reputation: 28

Use the CSS from other people. Alternately if you are using the Bootstrap framework (baked into most Joomla templates) just add the appropriate column visibility classes:

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

I added hidden-xs and hidden-sm to the div class list in front of the container. See here: Bootstrap Responsive Utilities

NOTE: those two classes are for the most recent version of Bootstrap. For version 2.3.2 you need to read here: Bootstrap v2.3.2 Responsive Utilities

Upvotes: 0

Alex
Alex

Reputation: 925

After the mobile first strategy you should first hide the footer and then display it for desktops only.

.footer {
  display: none;
}

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

Upvotes: 2

sonam gupta
sonam gupta

Reputation: 785

You have to write @media for that in css for your mobile width.

@media screen and (max-width: 360px) {
 .footer{
     visibility: hidden;
     display: none;
 }
}

For small mobile and you can change the width according to yours.

Upvotes: 0

pregunta
pregunta

Reputation: 138

Check this jsfiddle http://jsfiddle.net/ks1q8nkt/

@media screen and (max-width: 600px) {
  .footer{
    display: none;
  }
}

The code means that every class, id and element which is defined in the block will respond for all devices which have a max width of 600 pixels.

Upvotes: 0

Mike Furlender
Mike Furlender

Reputation: 4019

Something like this should work:

@media screen and (max-width: 600px) {
  .footer{
    visibility: hidden;
    display: none;
  }
}

Upvotes: 0

Related Questions