Just a single page on my website extends beyond the footer's reach

Hey there, I'm pretty new to this whole HTML/CSS thing and need some help. I have a website called cme.horse and everything seems to be running smoothly except for the Home page (main/index page). The issue is that it scrolls past the footer, while all the other pages are working fine. I've painstakingly gone over the code, copying and pasting sections multiple times to check for typos, but I just can't seem to find the error. If you could lend me a hand, I would greatly appreciate it! I've even resorted to copying and pasting chunks of CSS code and spending countless hours trying to fix this problem. It's starting to feel like an endless search with no solution in sight - any help would be a huge relief!

htmlcssscrollfooter

Answer №1

I have discovered the solution to your issue.

The error can be found in the 6th line of your CSS file, where you mistakenly applied your css properties to both your html and body tags.

Corrected code :

body {
    font-family: 'Merriweather', serif;
    font-family: 'Playfair Display', serif;
    font-family: 'Sacramento', serif;
    font-size: 100%;
    height: 100%;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    background-color: rgb(243, 224, 199, 1);
    overflow-x: hidden;
}

https://i.sstatic.net/ZHOYg.png

To ensure perfection, please make the specified changes in your file.

https://i.sstatic.net/0gbKc.png

Answer №2

These two lines working together are creating the impact:

html, body {
  height: 100%;
  overflow-x: hidden;
  ...
}

The removal of overflow-x might be simpler, but it really depends on your end goal. Setting the height to 100% creates a box the same height as the window, rather than the full document height typically seen on websites. This results in the internal content scrolling within that defined box.

It's puzzling why this effect is only happening on certain pages, but I did notice that the script index.js is linked on the home page and not the others.

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

specialized html elements within data-ng-options

I have a code snippet where I am populating select options from a controller using data-ng-options. However, I would also like to include an icon with each option. For example, I want to append <span class="fa fa-plus"></span> at the end of e ...

javascriptjqueryhtmlangularjs

Is there a way to produce a unique color using Stylus CSS?

Currently, I'm utilizing Express for Node.js and Stylus as the CSS engine. While Stylus is great, I'm facing some challenges in passing color variables or generating random colors. Despite attempting to use the javascript API for stylus, I find m ...

javascriptcssnode.jsexpressstylus

Utilizing jQuery for cloning elements

I need to add functionality for adding and deleting rows in multiple tables on my website. Currently, I am doing this by directly inserting HTML code using jQuery, but it has become inefficient due to the number of tables I have. I am considering creating ...

javascriptjqueryhtmlajax

Is it possible to create a hyperlink in the <button> element?

Having been immersed in HTML5 for quite a while now, I recently encountered a challenge while working on my login/register page project. I wanted to create a button that would redirect me to another HTML page upon clicking. While I am familiar with the < ...

javascripthtml

Creating a mobile/tablet friendly menu design

I'm currently working on designing a menu. I have made it look pretty nice so far, but I am facing an issue when the menu is viewed on mobile or small tablets. I want the menu to disappear and be replaced by a "MENU" button instead. Does anyone have ...

javascripthtmlcssmenuresponsive-design

When using Vue.js, scrolling inside the modal will seamlessly scroll the content of the modal's background as well

When you click on the image, a long scrolling modal appears. The issue is that when you scroll in the modal, it also scrolls the background of the modal. How can this be fixed? The Modal component is included in the code below: Carousel.vue <templa ...

vue.jsscrollmodal-dialogpopupmodalpopup

Is there a table that allows users to input percentages?

Looking for help with a table that has 2 columns: "Activities" and "Average % of Time". Users need to input a % value for each activity in the "Average % of Time" column. There are 7 rows for activities. The goal is to ensure that the sum of the % values f ...

javascripthtml

What causes the size of an image to decrease when placed within an anchor tag?

Trying to add clickable social media icons, but when wrapped in an anchor tag the images shrink significantly. <span class="iconspan"> <a href="https://www.instagram.com/lil_ijoez/" target="_blank" ...

htmlcss

When incorporating `Ionic/core` into my project, it unexpectedly alters my scss styling

Exploring StencilJs: In my project using StencilJs, I aim to create a wheel time picker with 3 columns for hours in 12-hour format and minutes which can vary based on the provided array such as [0,15,30,45] or [00,30]. Additionally, there will be options ...

csssassweb-componentstenciljs

Deleting a row from a table in Angular using a modal popup

Is there a way to remove a table row by pressing the confirm button in the modal popup? Open Delete Row Modal Popup I've attempted several methods without success thus far. I have coded separate components for adding, editing, and deleting users. H ...

htmlangulartypescriptformspopup

Move images horizontally next to the height of an element

I am attempting to increase the top attribute in relation to the element it is currently adjacent to. The element should only scroll directly next to the other element and cease when it surpasses the height of that element. My Goal: I want the image to re ...

javascriptjqueryhtmlcss

What is the best way to add spacing between the fields within a Bootstrap 4 form row that spans across 2 rows when viewed on small displays?

Trying to create a bootstrap 4 form with fields in one row for larger screens and two rows for smaller screens. The attempt was made using the following code: <div class="form-group row"> <label class="col-sm-2 col-form-label">File:</lab ...

htmlcsstwitter-bootstrapcss-selectorsbootstrap-4

Ways to modify the color of text in a hyperlink?

When working with hyperlink generation like the code snippet below, the typical blue color can be less than ideal. How can I dynamically change the font color of this hyperlink using JavaScript? $element.html(indicator.link(url)); ...

javascripthtmlcsshyperlink

Guide to linking a label to a checkbox without utilizing the "for=id" method

Below is the code snippet I am currently working with: <li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li> <li><inp ...

htmljquerycsscheckbox

Can someone explain the significance of the statement "We strongly advise using custom validation styles because browsers' default styles are not announced to screen readers"?

The Bootstrap 4 website explains the importance of using custom validation styles for form validation, as native browser defaults may not be easily announced to screen readers. What does this mean? Should users opt for native browser form validation o ...

htmltwitter-bootstrapvalidationbootstrap-4screen-readers

React - CSS Transition resembling a flip of a book page

As I delve into more advanced topics in my journey of learning React and Front Web Dev, I discovered the ReactCSSTransitionGroup but learned that it is no longer maintained so we now use CSSTransitionGroup. I decided to create a small side project to expe ...

javascriptreactjscsscss-transitionsreactcsstransitiongroup

How to notify when the value of multiple inputs changes using an Angular repeater

I am currently utilizing Angular to generate multiple inputs based on user needs. Although this approach works well, I am struggling to implement a simple alert that would display the values of these inputs. I have managed to retrieve the input values wi ...

javascriptjqueryhtmlcssangularjs

Is it possible to trigger multiple button clicks using JQuery simultaneously?

Hello everyone, I am new to StackOverflow and this is my first question here. I hope it's not too silly. Thank you in advance for your help! I am trying to achieve a functionality where one button click triggers the clicks of multiple other buttons u ...

javascriptc#htmljquerycallback

The elements at the bottom of the Google homepage do not stay in place when hovering

I'm facing an issue and seeking guidance on how to make the footer and 'Google in different languages' fixed when hovering over the buttons. I'm attempting to create this on my own without referencing the Google homepage code in Chrome ...

htmlcss

A mistake was found in the HTML code labeled as "enhance-security-request."

The Content Security Policy 'upgrade-insecure-requests' was included through a meta tag that is not allowed outside the document's head. Therefore, the policy has been disregarded. I encountered this issue when trying to add Bootstrap in Bl ...

htmlbootstrap-4