The website is not displaying the CSS styles properly

I created a new page called "NEW" with a form on it. At the top of the page, I am including an external page that contains my styles. Even though I am using the exact same route as another page where the style is applying correctly, on this new page the style is not being applied. What could be causing this discrepancy?

Page where the styles are working properly:

<% layout('partials/layout') -%>

  <h1 class="heading">Pet Gallery!</h1>     

  <div class="blog-home2 spacer">
  <div class="container gallery-container">
              <div class="row m-t-40">
             <% posts.forEach(function(post) { %> 
            <div class="col-md-4">
                <div class="card" data-aos="flip-left" data-aos-duration="1200">
                      <!-- spot where image should go -->
                    <h1><%=post.name %></h1>
                    <span><%=post.fee %></span>
                    <span><%=post.description %></span>
                    <span><%= post.location%></span>  
                    <div><a href="/gallery/pet/<%=post.id %>">View More</a></div>
                </div>
            </div>
             <% }) %>
        </div>
    </div>
  </div>

Page where the styles aren't applying:

<% layout('partials/layout') -%>

<h1>New Pet</h1>

<form action="/gallery" method="POST" enctype="multipart/form-data">

<div>
    <input type="text" name="post[name]" placeholder="Name">
</div>
<div>
    <input type="text" name="post[fee]" placeholder="Rehoming Fee">
</div>
<div>
    <textarea name="post[description]"  placeholder="Description"></textarea>
</div>
<div>
    <input type="text" name="post[location]"placeholder="Location">
</div>
    <input type="file" accept='images/*' name="images"  multiple>
</div>
<div>
    <input type="submit">
</div>


  [1]: https://i.sstatic.net/zjj7C.png

Code containing navbar and style link :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title><%= title %>></title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" href="stylesheets/post-show.css">

</head>
<body>
    <% include ../partials/navbar %>
    <% include ../partials/flash-message %>
    <%-body -%>



</body>
</html>

Answer №1

<% layout('/partials/layout') -%>
is a code snippet with a leading forward slash that affects the browser's search behavior. When there is a leading forward slash, the browser will begin its search from the root level of the domain. For example, if your current directory is http://example.com/pages/:

/partials/layout will be searched for at

http://example.com/partials/layout

while

partials/layout will be searched for at

http://example.com/pages/partials/layout

Answer №2

After some troubleshooting, I was able to identify the issue. It turns out that a forward slash was missing in the link to the stylesheet. It's still unclear why it worked for one page and not the other, but at least the problem has been resolved. Appreciate the assistance provided.

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

Display a triangle underneath the chosen menu option

How can I display a small triangle below the selected menu item, similar to my tag box? I have tried various methods without success. You can view my attempts at this link. Any suggestions on how to achieve this? Thank you! nav { float: right; m ...

Can the text-indent property be applied exclusively to Chrome and Safari browsers?

My combo box has an icon on the left side. In Chrome, it appears like the second image where the icon and text overlap. To fix this issue, I used text-indent since Chrome and Safari don't recognize padding for this particular case. While this resolv ...

How can I make a single block expand and have the option to uncheck it by clicking again?

Currently, I am in the process of creating a small program for a website where I intend for certain blocks to expand almost to the size of the window when clicked on to reveal text. Unfortunately, using checkboxes seems to cause all boxes to grow, and with ...

Visibility of image changes after selecting from dropdown menu

Whenever I choose a language from the dropdown menu, the corresponding language image should display in a div next to it, while hiding the irrelevant images. I've been experimenting with CSS properties like display: none; and block;, as well as jQuery ...

Excessive text in the input text area causing overflow

I am experiencing a minor issue with the primefaces inputTextArea. Whenever the text exceeds the assigned panel height, it overflows behind the next panel. Interestingly, clicking into the textarea resolves the problem temporarily, but on initial page view ...

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

When using the Column width property in React Material UI, it may not automatically expand

I've been playing around with React Material UI Tables and I'm having trouble making the columns auto-expand without wrapping. I tried setting the 'width: auto' property in the <Table size="small" style={{ width: auto}}> ...

What is the best way to position a background image so that it covers the entire screen but stops before reaching the bottom?

Having a bit of trouble with background image positioning here - it's simple enough to set a repeating background that starts from a specific point at the top. But what I'm trying to achieve is a black background that starts 100px from the top of ...

How can I locate and modify particular element attributes within PHP files in a WordPress template?

Hello everyone, I am relatively new to the world of Wordpress and have recently taken over a project from another developer. The previous developer left behind default placeholders and texts that need to be updated. One specific change I need to make is to ...

Shift the sleek navigation arrows to the interior of the slides

Is there a way to relocate the navigation arrows on the slider images? I have tried various methods found online with no success. Currently using ASP.NET, but doubt it matters. Employing the latest version of SLICK. Here is the HTML code snippet: <%@ ...

I am experiencing an issue with the display inline feature not functioning properly in Firefox

I am working with Html code: <div class="login"> <form class="form-horizontal signin"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Ema ...

What steps can I take to ensure my menu is responsive in the right way

What is the best way to create a responsive menu that displays properly on cell phones? On computers, it looks like this: [insert image description here][2] I'm having trouble with my menu not disappearing when I select an option, instead it just goe ...

What could be causing the flex item to be wider than its container?

One issue that can arise when utilizing flexbox is the scenario where, as demonstrated below, the content exceeds the width of the viewport causing the flexbox items to become wider than their container. What are the factors contributing to this situat ...

Strange CSS Behavior in Wordpress Child Themes

Currently, I am in the process of customizing a WordPress theme. In my situation, a div is being generated through a widget, with multiple classes: <div class="col-lg-3 focus-box item-1">...</div> The parent theme and bootstrap stylesheet al ...

Adjusting Window Size Causes White Space to Appear Above Div

I currently have two inline-block div in my post page that showcase my latest book reviews. Typically, these sections align perfectly and occupy the same amount of space on the screen. However, for certain window sizes, one of the inline-block elements end ...

An AngularJS directive designed to execute after a text input has been modified

I have integrated a bootstrap calendar datepicker that interacts with and updates an <input type="text"> field. As of now, when I use ng-change="myAngularExpression()", the function gets executed the moment the text box is selected. Is there a way t ...

Exploring different ways to customize the grid style in Angular 6

Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...

React conditional statement within a map function embedded in a JSX element

Below is the function I have created to generate tabbed items: function ConstructTabs(props) { const tabs = props.tabs; const makeTabs = tabs.map((tab, index) => { <React.Fragment> <input className="input-tabs" id ...

Ways to insert a divider into the menu items of a Kendo Toolbar split button

Kendo UI 2015.2.805 Is there a way to insert a separator line between menu items on a toolbar's split button dropdown? I am familiar with adding a separator line between toolbar buttons, but I am having trouble achieving the same effect for the menuB ...

Using the power of jQuery to load Ajax content, unfortunately, the content remains

Hey there, I'm currently working with an HTML file that utilizes AJAX to load content from other HTML files on the same server. However, for some reason, it's not functioning properly. I'm new to AJAX and I'm not sure what could be caus ...