The footer is failing to appear in its correct position on the homepage of the Rails application

My footer looks great throughout my Rails app except for the Home page.

Here is the content of my application.html file:

<!DOCTYPE html>
<html>
<head>
  <title><%= yield(:title) || "Wagon Rails" %></title>
  <meta name="description" content="<%= (yield(:description) || "").squish %>">

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <%= stylesheet_link_tag :application, media: "all" %>
  <%= favicon_link_tag %>
  <%= yield(:stylesheets) %>
  <%= csrf_meta_tags %>
</head>
<body>
  <%= render "shared/navbar" %>
  <%= render "shared/flashes" %>

  <%= yield %>

  <%= render "shared/footer" %>

    <%= javascript_include_tag "https://maps.google.com/maps/api/js?sensor=false" %>
  <%= javascript_include_tag "https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" %>
  <%= javascript_include_tag :application %>

  <%= yield(:after_js) %>

</body>
</html>

Although the footer is placed after the yield in my layout and works well throughout the application, it seems to be misplaced on the Home page. Here is a screenshot of the Home page:

Below is the code for the Home page, which I adapted from a Bootstrap template:

<header class="background-cover">
    <div class="header-content">
        <div class="header-content-inner">
            <h1>Your tennis tournament registrations and schedules in one click</h1>
            <hr>
            <p id="avectm"><strong>With TennisMatch, the struggle of registrations and scheduling is over. You can focus on the most important thing: giving your best on the court.</strong></p>
            <%= link_to t(".sign_up", default: "Sign Up"), new_user_registration_path, class: "btn btn-success page-scroll pad", id: "inscr"%>
        </div>
    </div>
</header>

<!-- More content from the Home page -->

And here is the code for the footer, which is contained in views/shared/_footer.html.erb:

<section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Contact Us!</h2>
                    <hr class="primary">
                    <p>Want to help us improve the site? Make a suggestion? Or just talk tennis over a cup of coffee? Feel free to get in touch with us!</p>
                </div>
                <div class="col-lg-4 col-lg-offset-2 text-center">
                    <i class="fa fa-phone fa-3x wow bounceIn"></i>
                    <p>06 66 02 74 14</p>
                </div>
                <div class="col-lg-4 text-center">
                    <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
                    <p><a href="mailto:contact@example.com">contact@example.com</a></p>
                </div>
            </div>
        </div>
    </section>

Answer №1

If you're experiencing issues with your HTML markup, such as unclosed tags, consider checking your homepage using the HTML Validator. This tool can assist in identifying and resolving these types of problems.

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

Is the utilization of javascript functions intertwined with the specific version of bootstrap being used?

I wrote a function that breaks down each letter in a paragraph to create a typing effect. However, after taking a break for a few days, I noticed that the effect was now the opposite – the letters were disappearing. To solve this, I decided to animate ...

Creating a Simple HTML Table Using PHP Arrays

I attempted to create a simple PHP array table, but the output of my code did not meet my expectations. <?php $names = array ( 'First Name' => array('Alfre', 'Beka', 'Charlie'), ...

What factors does YouTube take into consideration when determining the dimensions for the generated iframe code?

Currently, I am working on a feature that allows our users to embed videos on their websites using iframe code. I want this feature to function similar to how YouTube handles it. However, I'm facing an issue where the iframe size generated by YouTube ...

Activate the stripe button after successful bootstrap validation

My goal was to implement BootstrapValidator for validation on a couple of fields and enable the Stripe button only when both fields are valid. Currently, the button is enabled once any of the fields pass validation. The challenge lies in ensuring that the ...

The stunning fade effect of Magnific Popup enhances the visual appeal of the inline gallery

I'm currently using magnific popup for an inline gallery, but I'm not seeing any effects. I would like to have a fade effect when opening/closing the popup. Can someone assist me with achieving this? https://jsfiddle.net/gbp31r8n/3/ [Check o ...

Looking for assistance in streamlining my jQuery code for bootstrap tab pane. Any takers?

Having trouble setting a specific tab as active when navigating from different links. I have found a solution, but it involves writing code for each individual tab. Can someone offer assistance in simplifying the code? <table class="nav nav-tabs"> ...

Setting both the height and row height of the table is not allowed

Currently employing js DataTable, I aim to establish a default height for the table and row. My current approach is as follows: $(document).ready(function() { var table = $('#example').DataTable ({ iDisplayLength: 15, "bLen ...

Having the `overflow:auto` property conceals additional content

I've been experimenting with a demo on my website that incorporates snap.js and chart.js. Check out the demo on JSFIDDLE here After adding some JavaScript to show chart.js content while scrolling, I encountered a problem with the CSS style on line 1 ...

Swapping out a style sheet within a intricate header

I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target ...

How can I center the navbar logo and use it as a toggle for collapsing the menu?

This is a simple example of a navigation bar <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class ...

Display or conceal a div depending on whether the user is on a mobile or desktop browser

In order to optimize the display on different devices, I organized my content into two divisions. The left division contains quantity, price, and item name, while the right division includes product names. For mobile browsers, I would like to hide the pro ...

Applying CSS to Dynamic JavaScript Elements: A Guide to Styling Without In-line Code

I'm a beginner in web development and I've been experimenting with applying styles to dynamically generated div elements using JavaScript. So far, I've only been able to manually add inline styling through this function: function applyStyle( ...

Adjust the size of bootstrap card titles to match up with the image on the page

I am facing an issue where the title of the second card is pushing the image down. Is there a way to dynamically resize the card title to align all the images properly? Any help would be appreciated. https://i.sstatic.net/PRRHl.png Bootstrap Card ...

Enlarging an image on canvas and creating a repeating pattern

My canvas size is 500px x 500px. I have a png image that matches the canvas size, which you can view here. I am looking to resize the image to 100px x 100px and then use it as part of a repeat pattern on the canvas. This is how I achieve this: // First d ...

What is the best way to create a read-only input field?

https://i.sstatic.net/36h6s.png The code I attempted to use did not produce the desired result <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f ...

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page. I found a method in another thread which suggests using the following CSS code for vertical alignment: #container { position: absolute; top: 50%; height: 400p ...

The pictures are not showing up in the photo album

I am currently in the process of building a swim image gallery inspired by the Flex Panel Gallery project from Javascript30 (Repo Link). Upon previewing the site in a browser, I encountered an issue where the images extend beyond the frame, leaving only t ...

Problem with linear gradient in SVG text

I'm experimenting with adding a linear gradient to SVG text, but I'm struggling to specify the fill color in the text class. I came across an example online and decided to try it out, but when I entered the fill color for the text (in the sfp2 cl ...

Is there a way to modify the space bar and enter key functionality exclusively for the third button, rather than applying it to all buttons?

https://jsfiddle.net/ffkwgddL/ In the code, I have three buttons named first-button, second-button, and third-button. If the first-button (introduction) is clicked and then the space bar is pressed, it functions as if the first button was clicked again. H ...