issue encountered while attaching css file / css styles not rendering

Here is the css link I am using:

<link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />

Despite trying various solutions such as removing "rel="stylesheet"", changing to "text/html", checking paths, placing it in the public folder related to express, adding <base href="/">, and more, the styling still doesn't appear.

When I use text/css instead, I encounter MIME errors.

Below is my file path:

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

app.js:

var express = require("express");
var app = express();
var request = require("request");
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/public'));

app.get("/", function(req, res) {
  res.render("search");
  // res.render("location");

header:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

*

    <link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />

*

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Josefin+Sans:600|Open+Sans&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/3870ba704e.js"
      crossorigin="anonymous"
    ></script>
    <title>tv guide</title>
  </head>
  <body>

search:

<%- include('partials/header') %>
<section class="container-fluid content">
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <i class="fas fa-tape">filmraid</i>
    </a>
  </nav>

  <h1>Search for a Movie</h1>
 
  <form action="results" method="GET">
    <input type="text" placeholder="search term" name="search" />
    <br />
    <input type="submit" />
  </form>
</section>
<%- include('partials/footer') %>

I'm unsure if there's something else I need to add here. Any insights would be appreciated.

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

Having trouble with the visibility of the hover background?

I have a goal in mind: This is the outcome I've achieved so far: LINK My aim is to have a white background with a blue border appear at the bottom when hovering over navigation links. Unfortunately, this isn't happening as expected. Can anyone ...

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

I've been working on creating a JavaScript game and am currently tackling the challenge of implementing gravity. One crucial aspect I need to address is creating an infinite loop without causing the browser to crash. Is there a way for me to include a ...

Having trouble updating an array in a mongoose document?

Need help with updating an array in a document by adding or replacing objects based on certain conditions? It seems like only the $set parameter is working for you. Here's a look at my mongoose schema: var cartSchema = mongoose.Schema({ mail: Stri ...

Position an image to the right with a specific height using position absolute in Bootstrap 4.3

enter image description hereI am in the process of updating my Bootstrap 4.0 CSS to Bootstrap 4.3 CSS. Within my price section, there are 3 pricing panels. One of these panels includes an image with absolute positioning and specific pixel coordinates - l- ...

How can I extend a third-party JavaScript library in TypeScript using a declaration file?

Currently, I am working on creating a .d.ts file for an external library called nodejs-driver. While I have been able to map functions and objects successfully, I am struggling with incorporating the "inherit from objects defined in the JS library" conce ...

What steps can be taken to enhance cleanliness and efficiency, and what are some recommended practices to adhere to?

Currently, I am in the process of developing a user authentication system on the backend. Specifically, I have implemented a POST method for registering new users. userRouter.post("/", expressAsyncHandler(async (req, res) => { try { const { na ...

Hiding an HTML image element by setting its display to none will prevent it from being visible if later changed to block display

I am currently developing a web-based game that can be played on both desktop computers and mobile devices. However, for the optimal experience on mobile devices, players need to rotate their device to landscape mode. To prompt users to rotate their devic ...

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

What are the steps to create a dynamic dropdown effect for navbar content using animations similar to transitions?

IMPORTANT: THE NAVIGATION BAR IS NOT USING BOOTSTRAP When I hover over the "More" button, the dropdown content appears suddenly and disappears abruptly when moving the mouse away. I would like to add a transition effect to make the dropdown content appear ...

Double Activation of Bitbucket Pipeline on Tagged Commit

I have set up a CI pipeline in Bitbucket to build and test a shared Node.js library. Whenever we create a tag (for example, npm version patch -m "Upgrade to 0.1.2 for bug fix"), the new version needs to be published to the npm repository. To achieve this, ...

PHP Retrieve Current Time with AM/PM Display

Can anyone help me figure out how to use PHP to get the current time along with AM/PM indication? The code I have doesn't seem to be working correctly. Here is the code snippet that I am currently using: $format1 = date("G"); // this should give the ...

Retrieving URL Parameters in a POST Request with NodeJS and Express

I'm looking to achieve a specific task, but I'm unsure if it can be done without manipulating the URL as a string. I need to extract a parameter from the URL, even though I have some data passed in the post request body. The information I require ...

struggling to set up my server with node.js using express

As someone who is new to Node.js and Express, I decided to set up my own server by following a tutorial available at this link: Below you can find the code for my server.js file: var express = require("express"); var app = express(); var server = app.lis ...

What is the best way to showcase top-rated posts from my feed of posts?

I have a basic PHP script that allows users to post without logging in. Once they submit their posts, the posts are displayed below in a feed similar to Facebook's news feed. I'm now looking to extract the three most liked posts and display them ...

If viewed on a mobile device, separate the array (indexed list) into two rows

Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two ...

even after uninstalling, I can still see the node versions on my Mac

After removing node from my Mac, I am still seeing the version of node and npm when typing npm -v and node -v. It's puzzling because I can't find it in my root folder. Could it be that the uninstallation didn't actually remove it? ...

Align checkboxes horizontally to resemble a progress bar styling

Currently, I have a series of checkboxes that are displayed sequentially on the page. <div class="myCheck"> <h5>Here's what you've selected so far</h5> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect ...

Unable to install node-inspector: npm error - Property 'pause' cannot be read as it is undefined

Having trouble with node-inspector installation on npm 5.3.0 eric@mouni2:~$ sudo npm install -g node-inspector > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2157190c51534e47484d445361140f">[email protected]</a> ...

Shifting a div from side to side

I don't have much experience with coding, so I was hoping for some assistance. My goal was to create a div that moves back and forth using toggleClass; $('div').on('click', function() { $(this).toggleClass('active') ...

Unable to retrieve user attributes (provided as res.locals.user) in express and hbs view

Here is a snippet of code I use to verify user tokens and store the user information in req.locals: exports.isLoggedIn = async (req, res, next) => { if (req.cookies.jwt) { try { const decoded = await promisify(jwt.verify)( ...