What is the best way to expand the footer specifically for mobile devices?

My website has a footer positioned at the bottom of the page. The HTML and CSS for this footer are as follows:

<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>

The desktop version looks great, but on mobile devices there is a line break in the footer:

While it's not a big issue, I would like to know how I can make my footer larger specifically for mobile devices. I am not very experienced with CSS, but I have heard that different styles can be applied based on device size. Can anyone provide me with some guidance?

htmlcsstwitter-bootstrapfooter

Answer №1

Enhance your CSS by using Media Queries to style your footer based on specific screen resolutions.

For instance:

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

By implementing this code, you can adjust the height of the footer when the screen width is less than 480px.

Check out this useful list of device resolutions for reference here.

Learn more about Media Queries from this link.

Answer №3

Check out this solution,

 #sidebar {
width:auto;
}

Answer №4

Give this a shot

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

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

}
/*
Portable Computers
This is the typical viewport size for laptops and desktops, or anyone not using a mobile device. This section allows for more resource-heavy styles.
*/
@media only screen and (min-width: 40em) {
}
/*@2 38em
WORKSTATION
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
EXPANSIVE VIEWPORT
This is for larger monitors and potentially full-screen users.
*/
@media only screen and (min-width: 1240px) {

}

To optimize for mobile devices, consider increasing height.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

I'm having trouble with my Button not working, even though I am using useState and useEffect Check out the code below: import React, { useState, useEffect } from "react"; // import Timeout from "await-timeout"; import ...

javascripthtmlreactjs

Using embedded js files in jQuery's .load() function does not function properly

In the index.html file, I have the code snippet below: <div id="page-insert"></div> function openPage(pageid) { $('#page-insert').load(pageid); } openPage('testpage.html'); Additionally, there are script files embedde ...

javascriptjqueryhtmlajax

What is the reason behind the overflow in the HTML body?

I am currently honing my skills in front-end development by attempting to replicate the functionality of . Everything seems to be working fine, except for the fact that there is an overflow issue identified within the <body> element when inspecting w ...

htmlcss

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascripthtmlcss

Rotating elements in CSS using the transform property with rotateX and rotateY values

I've created a transformation effect using CSS, and now I'm looking to start with a specific rotation (rotateX(15deg) rotateY(180deg)) and then animate it back to its original position. Is there a way to achieve this reversal effect and how can i ...

csstransform

Placing a div directly beneath an anchor tag

I'm trying to create a dropdown menu that appears directly under the URL that triggers it. I have successfully made the menu appear, but I am struggling with positioning it correctly. Here is my HTML code: <div id="container"> Content here ...

htmlcss

Selenium is unable to activate the button element by clicking

I have been using Selenium with Python and attempting to click a button, but it simply isn't working. Here is the relevant HTML: <div class="nmMym"> <button class="sqdOP yWX7d _8A5w5 " type="button"> ...

pythonhtmlseleniumselenium-webdriverautomation

Manipulating the content of a specific row's table cells with a text box in jQuery Datatables

I am working with a jQuery datatable that consists of only one column. Every time a row is selected, a panel opens with a text box that automatically populates with the name of the selected td. I am trying to figure out how to edit the name of the selected ...

javascriptjqueryhtml

HTTP GET request not updating data

I'm experimenting with AngularJS and trying out some examples: Here's the HTML code snippet: <html ng-app="myApp"> <body ng-controller="JokesController"> <h1>{{ joke }}<h1> </body> </html> A ...

javascripthtmlangularjsangularjs-directiveangularjs-service

Increase the size of clickable hyperlinks in CSS

I am looking to increase the clickable area of my menu links. Currently, only a small part of the links is clickable and I want to know how to expand it. I have seen some CSS tricks using classes, but I also have an active class for these links. Can you ...

jqueryhtmlcsshref

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

If you're looking for an example of two columns adjusting their width based on mouse movement, check out this page from W3Schools. I'm trying to implement this feature in my React app, but I'm unsure of how to proceed. Below is the JSX code ...

javascriptcssreactjsnext.js

Unable to access controller using jquery/ajax in CodeIgniter along with a bootstrap template

When loading a page into another, everything seems to be working fine except for the controller loading: The scripts and CSS are being loaded in the default page code, which might be causing the issue. The error message "Failed to load resource: the serve ...

phpjqueryajaxtwitter-bootstrapcodeigniter

Learn how to apply CSS styles from one component to another in Angular

I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the back ...

cssangularangular12

Embrace the words enveloped within large quotation marks

I am seeking a way to format paragraphs with large quotation marks surrounding them. I have attempted several methods, but my line-height seems to be affected, as shown in the following image: Can anyone suggest a proper method for achieving this? (Addit ...

htmlcss

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

javascripthtmlcss

Tips for broadcasting the blob

I am currently working on a radio system project that involves streaming live audio from a microphone to the user in real-time. However, I am new to using node.js and unsure of how to achieve this. Can anyone provide guidance on how to stream the audio fro ...

javascripthtmlnode.js

Alternative solution to avoid conflicts with variable names in JavaScript, besides using an iframe

I am currently using the Classy library for object-oriented programming in JavaScript. In my code, I have implemented a class that handles canvas operations on a specific DIV element. However, due to some difficulties in certain parts of the code, I had t ...

javascriptjqueryhtmloopcodeigniter

Resolving CSS Conflict in Panels with Legacy Bootstrap

I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...

csstwitter-bootstrap

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

<nav> <div class='container-fluid'> <h1 class='logo'>Logo</h1> <ul class='list-unstyled naving'> <li><a href='index.html'>Home</a></li> ...

javascriptjqueryhtmlcss

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

I am struggling to align 5 inputs in a single row on a page with custom widths. For example, I want the amount input to be smaller than the offer input. I attempted to use columns and apply different classes for size, but the submit button ended up not bei ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4