The footer remains visible even on smaller screens

I've been working on a technical documentation page for Javascript as part of a project, but I've run into an issue with the footer not hiding on small screens like I want it to.

Here are some things I've tried:

  • Changing position fixed caused the footer to vanish completely
  • Using display: none;
  • Setting height and width to 0px;

Below is my SASS code. It's properly linked to the HTML page and CSS files.

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5px;
}

@media only screen and (max-width:400px) {

    footer {
        display:none;

    }
}
<footer>
        Designed and Coded by: 
        <a href="what i linked" target="_blank">my name</a>
    </footer>

I'm sure it's something simple that I'm overlooking, but being a newbie, I thought I'd reach out for some help.

Thank you so much, I really appreciate your time.

htmlcssmedia-queries

Answer №1

For it to function properly, remember to include 

<meta content="width=device-width, initial-scale=1" name="viewport" />
right at the beginning. 
    footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5px;
}

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

    }
}
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <footer>
        Designed and Coded by:
        <a href="what i linked" target="_blank">my name</a>
    </footer>

Photo:https://i.sstatic.net/p00b9.png

Answer №2

For the head tag: 
<meta name="viewport" content="width=device-width, initial-scale=1" />

In the CSS code:
@media only screen and (max-width:400px) {
    footer {
        position: unset;
        display: none;

    }
}

Answer №3

Although I agree with James' answer as a viable solution, I have a question of my own. When you refer to a small screen, are you defining it as a screen with a width less than 400px? If so, please disregard this. However, if by small screen you mean a screen with a height less than 400px, then make the following adjustment:

@media only screen and (max-height:400px) {
    footer {
        display:none;
    }
}

Please note that in this scenario, we will be using max-height instead of max-width.

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

Drag and Drop: Unable to Return Item to Its Original Position

I'm facing an issue with an HTML code that Drag Drop feature, everything works fine except for dragging it back to its original position. Below is the snippet of the HTML code: function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ...

javascripthtml

Eliminate any HTML content using Jsoup while retaining the text lines

I am working with a String that contains e-mail content, and my goal is to eliminate all HTML coding from this String. This is the current code I have: public static String html2text(String html) { Document document = Jsoup.parse(html); document = ...

javahtmlregexjsoup

Storing dynamically generated images into a database and linking them to an image button

Random rd = new Random(); string data = rd.Next(111111111, 999999999).ToString(); QRCodeGenerator q = new QRCodeGenerator(); QRCodeGenerator.QRCode qc = q.CreateQrCode(data, QRCodeGenerator.ECCLevel.Q); ...

htmlsqlasp.netimageqr-code

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Trying out a full page layout for the first time, with a left div serving as a block style nav. #admin_nav { width: 230px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #ddd; float: left; } The content is on the rig ...

htmlcsscss-float

Why does the selected attribute not function properly in <select><option> when used with ngModel?

I encountered an issue with Angular 6: when using a component based on the <select> element (combo-box), everything works fine if I use it in the traditional way, where I specify the selected attribute. In this case, the default option appears select ...

htmlangular6html-selectangular-ngmodel

Exploring the integration of HTML5 in ASP.NET applications

Can you provide a sample demonstrating how I can implement offline caching using HTML code in my ASP.Net application? ...

asp.nethtml

Tips on linking CSS files within a jade layout

I am having trouble referencing custom.css and bootstrap.min.css in my jade layout file that refers to views. It seems like the references are not working correctly. Can somebody please review my code to see if there is any issue? Jade Layout doctype htm ...

cssnode.jspug

Balanced padding for a harmonious interior and exterior presentation of elements in CSS

In my Bootstrap row, I have placed two images with 6 columns each. My goal is to have the same margin between these two images as the margin between the images and their parent element. I attempted to add margins/padding to the images, but found that addi ...

htmlcssbootstrap-4

How to move a div beneath the JavaScript files in Drupal 7

I am facing a challenge where I need to position a div right above the body tag without interfering with the scripts located above it. Despite my efforts, I have not been successful in achieving this goal. I attempted to use Hook_page_build to position t ...

javascripthtmldrupal-7hook

Using HTML files in Node.js

I'm struggling to understand how to include a file in Node.js. While other questions are focused on including JS files, I specifically need assistance with including files that contain HTML content, similar to the PHP include function. In PHP, I typi ...

htmlnode.jsexpressincludeserver-side-includes

Is there a way to verify if a user possesses a role that grants them access to the website?

In my database, I have 4 tables containing the following information: Table: users user_id | first_name | last_name | email | password | admin_approved Table: roles role_id | role_name Table: users_roles use ...

phphtmlmysql

The HTML5 Canvas Misalignment Issue

I currently have some HTML code that includes a canvas, span, and a button: <canvas id='myCanvas'></canvas> <span id='coords'></span> <button class='clear'>clear</button> Accompanying this ...

jqueryhtmlhtml5-canvas

Utilizing JavaScript to trigger an email with PHP variables included

i am trying to pass a few php variables using a javascript trigger. Everything seems to be working with the variables, databases, and script but I am struggling with the PHP part. Here is my attempt at the PHP code, although it clearly has some issues. I ...

javascriptphphtmlemail

JS filter function is not functioning as expected. It's unclear what the issue might be

Check out my previous inquiry What could be the issue with my filter? I've implemented a filter, but it seems to have some glitches when dealing with specific values. The 'No Record Found' message doesn't appear as expected in certain ...

javascriptjqueryhtml

issue with fetching response from ajax post call in slim framework 3

Update: The issue has been resolved. The correct localhost address for the ajax request should have been 127.0.0.1 instead of 121.0.0.1 On my client side, I am using the following code to send a POST request to localhost/login. <html> <title> ...

javascriptphphtmlajaxslim

How is it possible for flex-direction to function correctly even when display: flex is not explicitly defined

I'm unsure if it is required to specify the display property when the flex-direction is set in a container. Everything seems to be working fine without it, but I'm concerned that I might be causing issues: .App { background-color: white; ...

cssflexbox

Creating button groups with a centered .btn using Bootstrap 4

My button group has a link in the middle, so it needs to be an a tag. I could change it to a button and use JavaScript for navigation, but I'd prefer not to. Here is the code: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bo ...

htmlcsstwitter-bootstrapbootstrap-4

Design inspired by dot matrix patterns

Is it possible to create a background HTML page filled with a dot matrix designing tool? Can anyone provide guidance on how to achieve this? If I need to use a background-image for this, where can I find the appropriate picture? Thank you to everyone in ...

css

The Json script in a Chrome extension will only execute the first time the URL is inputted

I've been working on developing a Chrome extension that utilizes CSS and HTML elements to block specific sections of the YouTube page. The problem I'm encountering is that the Json script only applies the CSS files correctly the first time I visi ...

htmljsonurlgoogle-chrome-extension

Tips for resolving HTML issues in AJAX Client Side-templates from WCF-webservice

I am facing an issue with my templates where the returned HTML is encoded by default, and despite my efforts, I can't seem to find a solution. My goal is to substitute NewLines (\u000a) with a simple <br />, but every attempt results in &a ...

asp.nethtmlajaxdecodeclient-side