ERB causing CSS to not display properly

Recently, I successfully hosted an application on Heroku and it was working perfectly fine with the CSS being linked like this:

        <link rel="stylesheet" href="/css/style.css"/>

However, when I added my custom domain, the CSS stopped working. Upon checking the source code and clicking on the href, I received a "Not Found" response. Surprisingly, nothing has changed - my CSS folder is still located in the public folder of my app's directory.

Answer №1

Did you experiment with various options for the href, such as:

href="../css/style.css"

or

href="css/style.css"

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

Changing the properties of the admin bar when it is hovered over in

After successfully styling a button on the admin bar, I noticed a few imperfections in the implementation. The button in question is situated on the admin bar and is labeled "maintenance". Upon clicking the button, jQuery triggers the addition of the clas ...

Make the image take up the entire screen in HTML

My goal is to display an image that fills the entire screen. Here's how my HTML code looks: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title></title> </head> ...

Clustering in an environment requires merging and minifying granules

While Granule is effective for minifying and merging CSS/JS files on a local environment, it presents challenges in clustered environments. The issue arises when each node of the cluster computes its own file during runtime, causing discrepancies when a us ...

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

In my Vue CLI 3 project, I'm utilizing Bulma and have included the import in the 'index.js' file like so: import { createApp } from 'vue' import App from './App.vue' import router from './router' require('@ ...

ReactJS Navbar component experiencing CSS hover bug

While developing a navbar component in React, I encountered an unexpected issue - the hover effect on my navigation links suddenly stopped working. Strangely enough, the cursor: pointer functionality still operates on my logo but not on the nav links durin ...

Is there a way to customize the cursor of the webkit resizer (pulltab)?

I'm having difficulty implementing a custom cursor on my webkit pulltab. While I am able to change other properties like background color, the CSS "cursor" property remains unchangeable: #sessionbuilder::-webkit-resizer { background: #000; cursor ...

Tips for creating a layout featuring images and text placed next to each other in harmony

Is it possible to replicate this section layout using Bootstrap? Take a look at Image 1. ...

Pressing enter to submit a form when the submit button is not visible is functional in Firefox, but has no effect in Chrome

There is a form with various input fields and a hidden submit button (hidden using style="display:none"). Interestingly, in Firefox, pressing the return key while an input field is focused automatically submits the form. However, in Chrome, hitting retur ...

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column c ...

Looking to eliminate the extra space around elements inside the Body section

I'm diving back into HTML5 after years of coding in the old ways. Starting from scratch, I began working on a website design and code. However, I've hit a roadblock with the padding around my images that I can't seem to remove. I want all th ...

How can I combine an ordinary image and a CSS2D image in THREE.js CSS2DRenderer and save them together as a single .jpg file?

After implementing the following code... (1) I successfully saved regular rendered THREE.js scenes as .jpg files; (2) Additionally, I managed to utilize CSS2DRenderer to display CSS2D labels on top of the canvas; (3) Now, my goal is to save the image wi ...

Creating a CSS background that adjusts to fit any screen resolution

Hey there, I'm a beginner to all of this. I want my background image to adjust to fit any web browser resolution, regardless of the size. So far, I've come across this nifty little trick: html { background: url(images/bg.jpg) no-repeat center ...

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

Display the latest tooltip in a Tree view

I have developed a unique custom component to incorporate tooltips for each individual node within a Tree. function StyledTreeItem(props) { const { nodeId, labelText, tooltipTitle, ...other } = props; return ( <Tooltip title={tooltipTitle} placem ...

Is there a reason why Social Bar isn't appearing at the top?

My challenge is to position the bar close to the black footer. It appears correctly in Chrome, but not in Firefox and Opera. The screenshot shows how it looks in Chrome. However, in Firefox and Opera, the social bar is positioned lower and does not align ...

Is there a way to adjust the height pixel value in my code so it can be dynamic?

I have created a simple script that allows selected objects to fade in as the user scrolls down. However, my issue is that this script is quite rigid. If I were to apply it to 20 different objects, for example, I would need to manually adjust the height ea ...

What could be causing my chessboard to not wrap around properly with flexbox?

I have been working on creating an 8x8 chessboard by following this example: https://codepen.io/sammyslamma/pen/gJeOwY .flex-container { display: flex; flex-flow: row; flex-wrap: wrap; ...

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...

The Surprising Nature of <div> when containing <a> (anchor tags)

There are 3 div elements on a page. div { display: inline-block; margin: 10px; width: 200px; height: 200px; background-color: #333; color: white; text-align: center; } <div></div> <!--Div ...

Looking for a more efficient method to code this dynamic jQuery pagination loader?

Currently, my website uses a pager that loads the page when you click on the page numbers. The code shows the closest 10 pages along with arrows to navigate to the first, previous, next, and last pages. I am aiming to develop jQuery code that can update t ...