I'm having trouble with my footer hiding my main content whenever I adjust the screen size. What could be causing

Welcome to my first website! I'm just starting out and trying to figure things out. Despite my best efforts of searching online, I can't seem to find the solution to my issue.

I've been tinkering with positioning and containers, but I can't seem to get my footer to stay at the bottom of the page. It keeps moving up and overlapping with the content whenever I resize the page.

I apologize for the messy code filled with media queries and random comments from my experimentation.

Any advice or tips would be greatly appreciated!

(I know this seems like a "dump of code, fix my problem" situation, but my structure is all over the place and the issue might not necessarily be related only to the footer and main content)

htmlcssresponsive-designfooter

Answer №1

I made some adjustments to your CSS code by changing the height property to "fit-content" instead of a fixed height value. This change prevents content overflow and covering of the footer.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrapper {
    position:relative;
    min-height: 100vh;
}

.content-wrap{
    height: fit-content;
}

/* Additional CSS properties... */


<!DOCTYPE html>

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/your-link-here.css" rel="stylesheet" integrity="sha384-YourHashHere" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/your-js-file-here.js" integrity="sha384-YourJsHashHere" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="font-awesome.min.css">
    <!-- Additional head content... -->
</head>
<body>
    
<!------------------------------- nav ------------------------------->
<div class="wrapper">
    <div class= "content-wrap">
<div class="background-container">
    <nav>
        <a href="index.html"><img src="assets/logo.png"></a>
        <div class="nav-links" id="navLinks">
            <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="projects.html">PROJECTS</a></li>
                <li><a href="wibut.html">WHAT I'VE BEEN UP TO</a></li>
            </ul>
        </div>
        <i class="fa-solid fa-bars" onclick="showMenu()"></i>
    </nav>
</div>

<!------------------------------- main content ------------------------------->
<main>
    <h1 class="title">Projects</h1>
    <div class="grid-ish">
        <div class="spotify">
            <h2>Spotify Playlist -> Youtube Downloader</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Here goes additional content...</p>
        </div>
        <div class="discord">
            <h2>Discord Bot</h2>
            <p>Additional content for Discord Bot...</p>
        </div>
        <div class="tracker">
            <h2>Financial Tracker</h2>
            <p>Additional content for Financial Tracker...</p>
        </div>   
        <div class="idk">
            <h2>Haven't Decided</h2>
            <p>Content for Haven't Decided section...</p>
        </div>
    </div>
</main>

<!------------------------------- footer ------------------------------->
<footer>
    <div class= "footer-container">
        <div class="footer">
            <div class="footer1">
                <h2>Footer Title</h2>
            </div>
            
            <div class="footer2">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
                <a href="#">Link 4</a>
            </div>
            
            <div class="footer3">
                <a href="#">Social Link 1</a>
                <a href="#">Social Link 2</a>
                <a href="#">Social Link 3</a>
            </div>
        </div>
    </div>
</footer>
</div>

<!--<-------------JavaScript for Toggle Menu------------>
<script>
    
    var navLinks = document.getElementById("navLinks");
    
    function showMenu(){
        navLinks.style.right ="0";
    }
    function hideMenu(){
        navLinks.style.right = "-200px";
    }
    
</script>
</body>
</html>

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

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

This situation is causing me frustration... depending on the zoom level of the browser, my boxes do not align properly and it ends up looking messy (in all browsers). Any advice? Could I handle this more effectively with jQuery? HTML </div> <div ...

csshtmlzoomingfadeout

Issue with MUI Grid item not functioning properly when using overflowY: "auto"

I am encountering an issue while using MUI with React. I have a <Paper> element wrapping a <Grid> with 3 children elements. The problem arises when I set the overflowY property of the bottom grid item to "auto" - instead of showing the scroll b ...

cssreactjsflexboxgridmaterial-ui

Is it possible to control the display of open graph images on the iOS messaging app?

Recently, I discovered that it's possible to have multiple og:image meta tags on a single page. However, I'm struggling to figure out how this may impact the display on the iOS message app. I came across a Shopify website that showcases a mosaic ...

htmlfacebook-opengraph

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

javascripthtmlcssangulartypescript

Skip nodes in Polymer 1.0 by using ExcludeLocalNames

I recently attempted to transition from Polymer version 0.5 to 1.0 and came across a particular question: Is there a way to exclude certain nodes inside a paper-menu? In the previous version (0.5), you could use the attribute excludedLocalNames to achieve ...

javascripthtmlpolymer

Tips for resizing a tooltip using CSS

I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on th ...

javascripthtmlcss

Creating a fixed navigation bar on the right side using Twitter Bootstrap

I'm attempting to incorporate 4 navigation buttons on the right side of a page, which when clicked will allow me to navigate to different sections within the same page, similar to a single-page design. To achieve this, I am including the following co ...

csstwitter-bootstrap

Loss of Image Quality when Zooming out Canvas

I have developed a code to implement zoom-in and zoom-out functionality for a canvas image. However, I am facing an issue where the quality of the image deteriorates when zoomed more than once. I am using the canvas2image plugin to convert the canvas into ...

htmlcanvashtml5-canvas

What is the best way to stylize a date using Bootstrap-datepicker?

While this topic is well-known, I have a slightly more complex question regarding it. I have gone through the documentation here. My goal is to display the date in French format (dd/mm/yyyy) and save the value in US format (yyyy-mm-dd). Additionally, I nee ...

javascripthtmlcssbootstrap-datepicker

Can you tell me which BBC channel is airing this animation?

Is anyone familiar with the animation on the login screen of BBC when entering the day, month, and year? Check it out here: ...

cssajaxauthentication

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

javascriptjquerycsswordpress-theming

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Issues with the functionality of the AngularJS button directive

Currently, I am working on developing a RESTful API utilizing Angular and NodeJS. However, I have encountered an issue where a button to navigate to the details page of my application is unresponsive. While I believe the button itself is correctly coded, I ...

javascriptjqueryhtmlangularjs

What is the best method for effectively organizing and storing DOM elements alongside their related objects?

In order to efficiently handle key input events for multiple textareas on the page, I have decided to create a TextareaState object to cache information related to each textarea. This includes data such as whether changes have been made and the previous co ...

javascripthtml

Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

I am looking to implement a tooltip similar to the one shown in the image. The value in the title tag is dynamic and fetched from the controller. https://i.sstatic.net/C2v3D.png Below is the code snippet of my table: <table border="1" cellpadding="10" ...

angularjshtmlcss

Troubleshooting problems with CSS when zooming in and out

My CSS is designed for screen sizes larger than 1100 pixels. However, when I zoom in using ctrl and the plus sign, the center container on the page fails to wrap properly and suddenly breaks. HTML: <div id="outer_footer_bottom"> <div class=" ...

htmlcss

Regular expression to ignore the expression if it is found within a table

Looking to capture an expression, but only if it's not within a table using Ruby. hello. <p> <b> 1 capture </b> </p> <table class="tb1"> <tr> <td> <p> <b> 1 don't capt ...

htmlruby-on-railsrubyregex

Organizing communications in NodeJS messaging application

My latest project involves creating a chat room using NodeJS and socket.io which allows multiple users to connect with unique usernames. Everything is running smoothly, except for one minor issue. I want the messages sent by me to appear in a different co ...

javascriptjqueryhtmlcsschat

Guide on using Python to save a legitimate HTML page of a YouTube video

When I use requests.get(URL, allow_redirects=True) on websites like Youtube or Reddit, instead of seeing the usual HTML text content that appears when I view the page in a browser, I get a bunch of unexecuted JavaScript. All I really need is the title of ...

pythonhtmlhttpweb-scrapingyoutube

Scaling Images using HTML and CSS

Hey there, I'm currently learning web development and running into a bit of trouble with creating responsive images. Can anyone give me some guidance on what changes I should make in the code below? Here's the HTML code: <div class="caro ...

javascripthtmljquerycssfrontend