I'm having an issue where my footer is getting cut off when I resize the browser and start side scrolling. Can

I designed a webpage with a footer that contains another div holding centered content. The footer is supposed to span the entire width, while the inner content div is set to 960px with a margin auto to center it.

<footer> 
  <div class="footer-inner">Content</div>
</footer>

Here is the CSS:

footer {float: left; min-width: 100%; background-color: #000;}

footer-inner {width: 960px; margin: 0px auto;}

The issue arises when I resize the browser and see that the footer no longer stretches across the full width but gets cut off:

Screenshot:

Website:

If anyone can offer assistance, I would greatly appreciate it. I have already spent a lot of time researching this issue without any success, so now I turn to you for help!

csshtmllayout

Answer №1

Your webpage seems to be experiencing a issue where it is expanding to a minimum width of 1160px, possibly due to elements in your navigation or slider. As a result, using a width or min-width of 100% only expands the content across the window, including color bars like the navigation bar. This causes the footer to be less than 1160px when the window size is smaller. To ensure that the footer always stretches the full width of the site, you can modify your CSS as follows:

footer {
    width: 100%;
    min-width: 1160px;
}

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

Search bar placeholder text appears off-center in Firefox browser

I have implemented a universal search bar on our website and it is working perfectly in Chrome and Safari. However, I am facing an issue with Firefox where the placeholder text is aligned to the bottom of the bar instead of the middle. Usually, placeholder ...

csssearchplaceholder

having difficulty implementing the blur effect in reactJS

Currently, I am working on developing a login page for my project. Below is the code snippet I have implemented for the functionality: import React, { useState, createRef } from "react"; import { Spinner } from "react-bootstrap"; import ...

javascriptcssreactjs

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Whenever I use a script to fetch an array of objects from PHP... I successfully display the results on my website by outputting them into Divs. The challenge arises when I introduce CSS animations. The animation only triggers if the variable length excee ...

javascriptphpcssjsonanimation

Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...

htmlcsstwitter-bootstrap

What is the best way to create a mobile design in Dreamweaver while utilizing the same css file as my Desktop code?

Where does my layout provide a solution, and what adjustments can be made? I attempted modifying the screen dimensions in the Dw Design page without success. ...

htmlcssmobilelayoutdreamweaver

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Adjust the standard size of the IMG tag using CSS

I have a simple image tag with an incorrect URL http://jsbin.com/monivava/1/edit <img src="http://placekitten!!!.com/g/200/200"> The issue is that the default size for this unsuccessful image is 18x20 (at least in Webkit), but I want it to be 0px ...

htmlimagecss

What are the reasons and methods for storing multiple images within a single image?

Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...

htmlimage

How can I make a sticky element appear behind a different element?

https://jsfiddle.net/30suam6z/1/ .first { height: 100vh; background-color: red; position: relative; z-index: 2; /* Increase z-index to ensure it covers .test */ } .second { height: 100vh; background-color: yellow; position: relative; z- ...

csssticky

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

javascripthtmlcssvue.jsnuxt.js

Maintain form activity post submission using jQuery's addClass and removeClass methods

There is a button on my website that, when clicked, reveals a form. The code I am using for this functionality is: $('#theform').addClass('hidden') $('#theform').removeClass('hidden'); <div id="theform" c ...

javascriptjqueryhtmlforms

Inject AngularJS variable bindings into the view alongside HTML code

Is it possible to insert HTML markup into an Angular variable? app.js function myController($scope){ $scope.myItem = '<p>' + Example + '</p>'; } index.html <div ng-controller="myController">{{myItem}}</div&g ...

htmlangularjs

Experience a unique double scrolling effect using the react-spring parallax and react-three-fiber Canvas components

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div. In the screenshot provided, you can see div1 and div2 each having t ...

htmlcssnext.jsreact-springreact-three-fiber

Icons in small circles surrounding text in HTML

I am trying to add a small icon or image next to my HTML code on a webpage, but I can't seem to get it to display properly. Currently, the image is showing above the code instead of beside it. How can I adjust my code to achieve this? Below is the cod ...

htmlcsswebfrontendbootstrap-4

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

In my React application built with next.js, I am fetching a stylesheet via a GET request and appending it to the webpage. However, whenever this stylesheet is loaded in, the elements impacted by it re-render unnecessarily, even if there are no actual chang ...

javascriptcssreactjsstylesheetnext.js

Break up a list into separate paragraphs and style each word using individual CSS

I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...

javascripthtmlcss

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

javascripthtmlarraysvariables

What could be causing the partial failure of my CSS stylesheet in my Django application? Could it be related to retrieving data from the database?

After following various tutorials, including one on LinkedIn, I believe my Django settings are correct. However, I am facing an issue with the CSS stylesheet in my app. The styling works perfectly everywhere except for the section where I retrieve data fro ...

htmlcssdjangopostgresql

What could be causing a .ts file to not play correctly?

I need help downloading a video from the following URL: I have successfully downloaded the file, but none of my video players can play it. Could it be encrypted? Is there a solution to make it work? Appreciate any help! ...

htmlvideotype-conversionvideo-streamingvideo-player

Add the cordova plugin multi-image-picker with the following command

onDeviceReady: function() { window.imagePicker.getPictures( function(results) { for (var i = 0; i < results.length; i++) { alert('Image URI: ' + results[i]); } }, function ...

htmlcssangularjscordova