Issues with CSS not reflecting on GitHub pages

Struggling to apply my CSS to my gh-pages, I feel like I'm stuck in a loop.

Here's how it was originally set up:

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

(the CSS is in a folder called CSS just inside the root)

I've tried a few things:

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

I even attempted moving the CSS to the root:

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

Lastly, I switched to using my main CSS file instead of the one mentioned above. No success.

All my changes were made in the main branch, pushed, and merged with gh-pages. Can't seem to figure out where I'm going wrong, still getting the hang of this! n_n

View my portfolio website here Check out my GitHub repository here

htmlcssgithubgithub-pages

Answer №1

One potential problem I noticed with the link you provided is the casing. You could try using this format instead:

<link rel="stylesheet" type="text/css" href="./Css/style.production.css">

Based on the folder naming convention you used, I tested it using inspect element, so it might not work as expected.

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

Array of Javascript elements in three dimensions

Currently, I am working on creating a 3D array in JavaScript, but I am facing some uncertainty in the process. My goal is to have three arrays - Provinces, Cities, and Malls - all in a sequential order, and I am looking to build a 3D array to store all thi ...

javascriptjqueryhtml

Exploring the capabilities of HTML5's file API along with Octokit.js to work with

I have been trying to create a form that allows users to upload binary data to GitHub using octokit.js. However, every time I attempt to do so, the data ends up corrupted on the GitHub side. Here is a minimal working example: http://jsfiddle.net/keddie/7r ...

javascripthtmlgitblobhtml5-filesystem

Can the text within the <h3> element be displayed on top of the inline image without the use of <span> tags or background images?

Can the text inside an <h3> tag be displayed over an image without using <span> and images in the background? HTML <h3>sample caption 1<img alt="" src="banner4.jpg" /></h3> CSS h3{ } h3 img { } ...

cssxhtml

nsIStyleSheetService - The Gateway to Stylish CSS

I am currently utilizing nsIStyleSheetService within my Firefox extension to apply a custom stylesheet to every webpage. While everything is functioning properly, there are a few styles that are not being applied as expected. One of the styles causing iss ...

cssfirefox-addon

Tips for updating a div element while maintaining its style and select2 plugin functionality with jQuery

Within the HTML code, I am attempting to refresh the following div: <select name="test[]" id="test" multiple required class="select2"> @foreach($tests as $s) ...

javascripthtmljquerylaravel

Increasing the identifier of duplicated input fields using jQuery

There is a specific section in my form that consists of a select box and three checkboxes, which needs to be duplicated on request. While I have successfully cloned the div and incremented its specific div, I am facing challenges in incrementing the checkb ...

javascriptphpjqueryhtmlwordpress

Modifying the array structure will deselect all individual <Input> elements that have been iterated

Hoping to create a system for adding/removing sub-items with buttons that increment/decrement slots in an array, where input fields are automatically added and removed: <div *ngFor="let item of itemsInNewOrder; let i = index"> <input [(ngModel) ...

javascripthtmlarraysangular

IE not rendering 'right' property in jqueryui CSS

I am attempting to shift a neighboring element after resizing a text area, triggered by the stop event on jqueryUI's resizable feature: $("textarea").resizable({ stop: function (event, ui) { var x = ui.originalElement.closest("li").find(" ...

cssjquery-uiinternet-explorer

Is there a way to retrieve the list element that was added after the HTML was generated?

How can I reference a list element added using the append function in jQuery within my onclick function? See my code snippet below: $(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET ...

javascripthtmljquery

A guide to using JavaScript to restrict the textarea's height while allowing it to expand dynamically and setting a maximum height

Seeking assistance with a challenge I have encountered and unsure how to resolve. Any help would be greatly appreciated! The issue at hand is as follows: I am currently working on a textarea. My goal is to have the input box start with a height of 36px, ...

javascriptcss

What is the best way to condense all nested elements within a parent element?

I have a collapse element that contains some nested collapse elements. I am trying to make sure that when the parent collapses, the nested item also collapses. Although it appears to collapse when closed, it does not stay collapsed when I reopen the paren ...

htmlcsstwitter-bootstrapbootstrap-5

Navigating directly from one web page (Screen A) to another web page (Screen B) without passing through any intermediary screens (web pages) using the Selenium

This query does not pertain to managing windows or handling multiple browser windows; instead, it involves navigating across different web pages of a web application within the same window. In my scenario: 1. I navigate from Screen A to Screen X to Scre ...

javahtmlseleniumselenium-webdriverwebdriver

Enhancing Your WordPress Menu with Customized Spans

I have a WordPress menu structured like this: <div id="my_custom_class"> <ul class="my_custom_class"> <li class="page_item"><a href="#">page_item</a> <ul class='children'> <li class="page_item chil ...

javascriptjqueryhtmlcsswordpress

The differences between using the opacity attribute in HTML and the opacity property

There are two distinct methods for adjusting opacity in HTML: <div opacity="0.5"></div> and <div style="opacity: 0.5;"></div> I am familiar with setting these values in JavaScript as well: div.setAttribute("opacity", 0.5); and ...

javascripthtmlcss

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

javascripthtmlreactjspdfjspdf

Tips for accessing a specific element within an array of objects

I have an array called options_hotel which contains 2 arrays (but can have more based on fetched data from the database) Both arrays have elements like ID, NOM, and ADRESSE : Array(2) 0: {ID: "1", NOM: "Le messager", ADRESSE: "30 ...

javascripthtmljquery

What is the best way to determine the size of CSS elements relative to other elements?

Is there a way to calculate the size of an element by using calc() or any other method based on the size of another DOM element? ...

htmlcssdomlayout

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

pythoncsspyqt

Adjust the path-clip to properly fill the SVG

Is there a way to adjust the clip-path registration so that the line fills correctly along its path instead of top to bottom? Refer to the screenshots for an example. You can view the entire SVG and see how the animation works on codepen, where it is contr ...

javascripthtmlcssanimationsvg

Tips for keeping notification icons in the upper right corner of the box?

I am facing an issue with absolute positioning where the notification icons I've positioned to the top-right corner of a box are moving away when the screen size changes. Desired appearance of the image Actual appearance when screen size is adjusted ...

javascriptcssreactjsstyled-components