Having trouble with Bootstrap's "hidden-xs" class not working and struggling to create a sticky footer for small viewports

Trying to tackle the challenge of making my footer stick to the bottom of the page on smaller screens has been quite troublesome. As a temporary fix, I decided to experiment with hiding the div entirely until I figure out a proper solution.

The HTML

<div class="sitefooter">
  <div class="container">
    <div class="row">
        <div class="col-md-4">
        code
        </div>
        <div class="col-md-2 col-md-offset-1">
        code
        </div>
        <div class="col-md-2 col-md-offset-1">
        code
        </div>
    </div>
    <div class="row top20">
        <div class="col-md-4 col-md-offset-4 col-xs-6" style="text-align:center;">
        code
        </div>
        <div class="col-md-4 col-xs-6" style="text-align:right;">
        code
        </div>
    </div>
   </div>
</div>  

I've attempted various approaches such as adding xs-hidden to each col-md div, wrapping the entire structure in xs-hidden, and testing individual parts separately but none resulted in hiding the div on small viewports.

I did successfully test xs-hidden on a different element of the website, which worked fine, but for some reason, it's not functioning correctly here.

The CSS

.sitefooter {
bottom: 0;
position:absolute;
background:url(../img/headerbg.png);
width: 100%;
height:287px;
padding-bottom:20px;
}

.sitefooter>.container>.row>.col-md-3>p, .sitefooter>.container>.row>.col-md-4>p, .sitefooter>.container>.row>.col-md-2>p {
font-size:14px;
padding-top:10px;
color:#CCC;
padding-bottom:15px;
}


.sitefooter>.container>.row>.col-md-3>h3, .sitefooter>.container>.row>.col-md-4>h3, .sitefooter>.container>.row>.col-md-2>h3 {
font-size:20px;
padding-top:20px;
color:#408af0;
}

.sitefooter>.container>.row>.col-md-3>a, .sitefooter>.container>.row>.col-md-4>a, .sitefooter>.container>.row>.col-md-2>a {
color:#999;
font-size:14px;
}

.sitefooter>.container>.row>.col-md-3>a:hover, .sitefooter>.container>.row>.col-md-4>a:hover, .sitefooter>.container>.row>.col-md-2>a:hover {
color:#fff;
font-size:14px;
}

.top20 { margin-top:20px; }

The ideal scenario would be to have a sticky footer across all viewports, but for now, I'm settling for this compromise.

If anyone can spot what I might be missing or doing incorrectly here, any help would be greatly appreciated!

Answer №1

If you're working with the default bootstrap breakpoints, you can utilize media queries to target specific screen widths and make changes accordingly. For example, if you want to apply styles to xs bootstrap screens, you can use the following media query:

@media only screen and (min-width : 480px) {
     // Code Here
}

To keep the footer at the bottom on xs screens, you can do the following:

@media only screen and (min-width : 480px) {

    .sitefooter {
        position: fixed;
        bottom: 0;
    }

}

Alternatively, if you want to hide the footer entirely on the same screen width, you can use:

@media only screen and (min-width : 480px) {

    .sitefooter {
        display: none;
    }

}

Using media queries instead of bootstrap visibility classes allows for more customization and control over your designs.

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

How can I apply Ben Alman's debounce jQuery function in my code?

I am currently utilizing a project found at https://github.com/cowboy/jquery-throttle-debounce My code seems to be somewhat functional, however the debounce feature is not functioning as expected. This results in the waterfall function being triggered for ...

The dimensions of the box remain fixed and do not change when the screen is resized

Just starting out with HTML and CSS and trying to create a responsive website. Running into an issue where the black striped box on my page is not moving up when I resize the screen. It appears to be stuck in place, causing a gap between it and the slide s ...

Move a <div> using a handle (without using JQuery)

I devised a plan to create a moveable div with a handle and came up with this code snippet: var mydragg = function() { return { move: function(divid, xpos, ypos) { divid.style.left = xpos + 'px'; divid.style.top = ypos + &apo ...

Getting row data in datatables after a button click: A step-by-step guide

Could somebody provide assistance with retrieving a single row of data on a click event? This table is dynamically populated after the AJAX call's Success function is executed <div class="table-responsive table-wrap tableFixHead container-flu ...

Custom options in MUI Autocomplete are not displaying the selected option

I am currently implementing MUI v5's Autocomplete for a dropdown feature on my website. Within this dropdown, I have options that include both a title and an id. My goal is to store the selected option's id in the state while also updating the d ...

Unable to adjust the top padding of the navbar to 0 pixels

Having recently started learning HTML and CSS, I am encountering an issue with the padding on my navbar. I am unable to get it to align with the top of the site as there is a persistent space between the navbar and the top. Below is my HTML code: <!do ...

Caution: Anticipated the server's HTML to include a corresponding <body> within a <div> tag

Upon checking the console, I noticed a warning message appearing. I am puzzled as to why this is happening since I have two matching <body> tags in my index.js file. The complete warning message reads: Warning: Expected server HTML to contain a matc ...

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

Trigger javascript function with a button click

Is there a way to trigger a JavaScript function from an HTML button that is not functioning properly? REVISED To see the issue in action, please visit this jsfiddle link: http://jsfiddle.net/winresh24/Sq7hg/341/ <button onclick="myFunction()">Try i ...

Check to see if the date selected from the HTML5 date picker is in the past compared to the current date

When working with HTML, I have a task where I need to input a date (mm/dd/yyyy) using the new HTML 5 date picker: <input name="date" type="date"> My goal is to validate whether the date entered is older than today's date. $this_date = $_POST ...

Personalize Badge Component

I've been on the hunt for a solution to customize a badge component similar to what's seen here: https://mui.com/material-ui/react-badge/. As of now, only options for making it a dot or adding a number in a circle are available. However, I' ...

Using JQuery to Execute Matching Based on Text Within <A> Elements

After reviewing the resources on Jquery Extract URL from Text and jquery match() variable interpolation - complex regexes, I am still a bit confused. The issue at hand is that I have a webpage with a dropdown menu at the top. Inside the dropdown, there ...

Stop the occurrence of OpenCPU javascript error pop-up notifications

I'm currently experiencing an error related to CORs during a test deployment of OpenCPU. While I may create a separate question for this issue in the future, for now, I am wondering if it is possible for the deployment to fail without alerting the end ...

What is the best way to execute a JavaScript function using Python Selenium?

Is it possible to repeatedly call the MapITRFtoWgs84() function with input from a text file and save the output to another text file? I believe Selenium might be the right tool for this task. Could you provide guidance on how to achieve this? Attached is ...

Ways to eliminate double slashes from URL in Next Js. Techniques for intercepting and editing a request on the server side using getServerSideProps

Looking to manipulate a server-side request - how can this be accomplished? http://localhost//example///author/admin/// The desired output is: http://localhost/example/author/admin/ In Next Js, how can duplicate slashes in a URL be eliminated and req ...

Generating dynamic links in HTML

I've been stuck on this problem for a while now. What I'm trying to do is create a Django website that pulls in Twitch livestreams and displays them on different pages. It's a project I'm working on to learn how to use APIs in web appli ...

Utilizing Vue component data within inline CSS of a Vuetify component: a step-by-step guide

I am currently working on a list component that is dynamically generated from data and I have a specific requirement to style each item based on the color provided in the data. Here is an example of the Vue component: new Vue({ el: '#app', ...

Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...

The error of "Uncaught ReferenceError" is being triggered by the use of `process?.env?

A bug was discovered in our front-end code related to the following snippet: <span style={{ color: 'red' }}>{process?.env?.REACT_APP_HEADER_SUFFIX ?? ''}</span> The bug triggered the following error message: Uncaught Refere ...

Nuxt - Sending Relative Path as Prop Leads to Error 404

I am currently working with an array of JSON objects that I need to import onto a webpage. The process involves iterating through the data and passing the objects as a prop to a component. One of the attributes within the JSON data is a relative path for a ...