Reputation: 1763

How to enlarge footer on mobile only?

I have a footer at the bottom of my page. It has the following HTML and CSS:

<style>
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        /* Margin bottom by footer height */
        margin-bottom: 60px;
    }

    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 60px;
        background-color: #e7e7e7;
    }
</style>

<div id="footer">
    <div class="container col-md-3 text-center">
        <p class="text-muted">© 2015, LuMa</p>
    </div>
    <div class="container col-md-6"></div>
    <div class="container col-md-3 text-center">
        <p><a href="/terms">Terms</a> & <a href="/privacy">Privacy</a></p>
    </div>
</div>

This looks good on desktop:

But on mobile devices there is a line break:

That's okay, but how can I enlarge my footer on mobile devices? I'm not very familiar with CSS, but I heard there is a way to apply different styles on different sized devices. Has someone got a hint for me?

Upvotes: 1

Answers (4)

Nima Parsi

Reputation: 2110

Use Media Queries at the end of your CSS to target your footer when a certain resolution is detected.

Example:

@media screen and (max-width: 480px) {
    #footer {
        height: 100px;
    }
}

This will override the footer's height when a maximum width of 480px is detected from the screen.

Here's a great reference list of resolutions.

More about Media Queries

Upvotes: 3

QArea

Reputation: 4981

Try this

/*@1 14em
mobile
*/
@media only screen and (min-width: 14em) {

}
@media only screen and (min-width: 27em) {

}
/*
Laptops
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 40em) {
}
/*@2 38em
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 51em){

}

/* @3 51em
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

}

For mobile you need to enlarge height.

Upvotes: 1