My website is experiencing an issue: everything displays properly when the window size matches or exceeds the background image, but on a smaller window, there is no scroll bar which causes the footer to disappear.
Here is an image showing what happens with a small window:
VIEW SMALL WINDOW ISSUE
Check out my website here:
VISIT MY WEBSITE
It appears that your footer is disappearing because the element #footer has been set with a fixed height of 835px. This causes the footer to always stay 835px from the top of the browser window. When the window size is reduced below 835px, the footer becomes invisible.
To ensure that the footer remains visible, consider changing its position to absolute instead of fixed. With absolute positioning, the footer will be positioned 835px from the top, relative to the webpage itself rather than the browser window.
If you want to make sure that the footer is always visible on screens of any size, you can also apply min-height: 835px; to the body tag.
EDIT
To keep your footer centered while using absolute positioning, you can use a combination of left and margin-left. The following style code will center your footer, regardless of the window size.
#footer {
list-style: none;
position: absolute;
left: 50%; /* Always positions the footer at 50% of the screen width. */
margin-left: -446px; /* Adjusts for total footer width by halving it (e.g., -892px / 2 = -446px). */
top: 835px;
font-size: 14pt;
}
<iframe src="#link"> #document <!doctype html> <html> ... </html> </iframe> Is there a way to customize the styling of elements within the #document using CSS only, without needing to use Jquery? ...
I'm experiencing some alignment issues with the images in my slideshow. I used this example as a reference to create my slide: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots When clicking on the next image, it seems to mo ...
In my application, I am utilizing Jquery datatable with a table that includes the following columns: Name, Office, A1, B1, Diff1, A2, B2, Diff2, A3, B3, Diff3, A4, B4, Diff4 Additionally, there is a select box containing the options: 1. All 2. Diff1 3. D ...
I created a table to display leave details of employees with sorting options from date to date. Now, I need to include buttons for exporting the data to Excel and PDF formats. Check out the code below: <form name="filter" method="POST"> <in ...
I have a table shown in the image. I am looking to create a function that calculates price* quantity = subtotal for each row, and then sum up all the subtotals to get the total amount with Total=Sum(Subtotal). https://i.stack.imgur.com/4JjfL.png This is ...
I'm attempting to showcase images inside a table cell using CSS. Here's what I currently have: HTML: <td class="activity-status status_not_started">Not Started</td> CSS: td.activity-status { font: 0/0 a !important; color: transpar ...
My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...
I'm currently dealing with a website that has a structure similar to this (Minimal Reproducible Example): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&q ...
Upon hard refreshing the page in the middle section, there seems to be an issue with the paroller js transform: translateY(); CSS effect not functioning properly on the <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" da ...
I am currently working on a small website and encountering some challenges with jQuery animation. My issue involves placing a single character text inside a circle and wanting it to grow when the user hovers over it, while keeping the inner text in its ori ...
I have developed a dynamic HTML table that includes various input controls. I am looking to restrict input to only decimal values with two digits after the point. For example: 1111.22 , 44445454.33 Here is the HTML code snippet: <div id="divdynam ...
Using the bootstrap grid system, I am facing some uncertainties. I would like to create a header where there is a logo on the left and links on the right. Below this header, I want a menu that spans the same width as the content above. In my current setu ...
My title may be a bit off, but I have a PHP file that needs to include a .inc file containing menu code. Here is how I'm attempting to do it in the PHP file: <?php include_once("php_menu.inc") ?> And here is my HTML code for the menu: < ...
Encountering an issue where my search term in the navigation bar is not binding to a controller variable due to it being out of scope. Attempting to utilize ng-model in the partial HTML navbar to connect the input value with the controller variable. Parti ...
Imagine a layout where there is always a header at the top, a footer at the bottom, and the space between them should be filled by the content 100% (image 2). Additionally, everything in the header, content, and footer should be horizontally centered, usin ...
I'm experimenting with a unique effect for my links that involves making it look like the upper left corner has been bitten off. To achieve this, I am using absolute positioning of a square element with the same background color as the link itself. W ...
After including angular.min.js and angular-route.min.js I encountered an issue where clicking the login button would change the URL to '/home', but the home.html page wouldn't load. I attempted adding a controller under templateUrl, but it ...
My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...
Dealing with Responsive Design Hey there! I'm having an issue with my Bootstrap layout. I managed to center a button, but when I adjust the resolution or make it smaller, the button wraps and shifts to the right. Can anyone help me figure out what we ...
I'm currently facing an issue with incorporating a Materialize dropdown within a dynamically generated table using *ngFor. The dropdown does not display when placed inside the table, however, it works perfectly fine when placed outside. <p>User ...