What could be causing the CSS modifications I made to not show up on my website?

I've been working on putting together a portfolio website as part of my web design course. I've set up a style sheet for the site, but I'm having some trouble seeing the changes reflected online. When I check the site locally in Chrome, all the changes are there, but when I upload it, nothing appears to be different. I've reviewed my code and even used validator.nu to ensure everything is correct, but I can't seem to figure out what's causing the issue.

Here are the links to my HTML and CSS files:

https://gist.github.com/J-Conley/94255b04292287b58892b75fdc5e35c0

and you can view my website here:

.

In case it helps, my project folder is named cf_template-1.1.1, within which there are directories labeled html, css, and img. Any guidance or assistance would be greatly appreciated.

htmlcss

Answer №1

Don't ignore the errors in the console, address them and try again if they persist. https://i.sstatic.net/hVlNm.png

  • Be cautious of how image URLs behave differently in localhost versus live sites. Ensure proper uploading of images using your website builder instead of static URLs.

  • If you're utilizing Bootstrap, make sure to override styles correctly by referencing exact selectors used by the library. Utilize inspect element or web developer tools to identify the appropriate selector to customize without conflicting with default library styles. Import your custom style sheet as the final step.

Answer №2

Your mistake lies in the css file path you provided.

<!-- Add custom styles for this template here -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

Instead, use:

<!-- Insert custom styles for this template here -->
<link rel="stylesheet" type="text/css" href="styles.css">

Answer №3

Your images seem to be missing. Double-check the path and try re-uploading them to ensure they are correct. You may want to consider using an absolute path for greater accuracy.

is not a stylesheet. Please remove any style tags associated with it.

Answer №4

It is advisable to switch your Jquery version from 1.11.3 to 3x for improved compatibility. This upgrade is necessary as version 1.11.3 may not work seamlessly with Bootstrap 3.3.5. Additionally, consider disabling the cache by clicking on the "disable cache" button under 

Chrome Dev Tools->Network->Disable Cache
. Oftentimes, cache can be the reason behind CSS files not updating properly.

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

Exploring jQuery: Choosing all li elements starting from a specific index to the end

Is there a way to select the last item, li:eq('+(lastItemIndex)+')', and all subsequent items until the end? Check out this JSFiddle demo for an example of changing elements in li from 3 onwards. ...

javascriptjqueryhtmljquery-selectors

Obtain consistent outcomes by entering identical data in both Ajax and PHP

My code takes a number input in a <textarea>, then uses AJAX to validate it randomly with PHP (using rand()). The validated number is returned along with the words correct or incorrect to a <div> in HTML. The issue is that if the same number i ...

phphtmljqueryajax

How to automatically embed a p5.js canvas into an HTML canvas with the drawImage() method

Whenever I attempt to draw the p5.js canvas into an HTML canvas using drawImage(), I always encounter this error: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type ' ...

javascripthtmlp5.jsprocessing.js

How to link an external CSS file to a Vue.js project

I created a new project using @vue/cli and now I want to add an external CSS file to my App.vue Here's what I attempted: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | ...

javascriptcssvue.jswebpack

Adjust the width of the container and rotate the text accordingly

I am looking to display text vertically (like a y-axis chart label) and need the ability to rotate text of varying lengths while keeping it on one line. My attempt to achieve this using CSS3 transforms can be seen in this JSFiddle: .rotate { transform ...

csstransform

Adjust the width of an anchor tag

I have been experimenting with different solutions and unfortunately, I have not been successful in resolving the issue at hand. While working on a WordPress website, I encountered some challenges. Despite having some knowledge in this area, I am struggli ...

htmlcsswordpress

The object of type 'NoneType' does not have the 'next_element' attribute

Here we have an HTML snippet of a website with a single itemprop="brand": <dd itemprop="brand" class="attributeValue-2574930263"> <a class="link-3970392289 link__default-1151936189 attributeLink-2414863004&qu ...

pythonhtmlbeautifulsoupnonetype

Tips for aligning two divs of varying sizes side by side

Imagine having two div elements: <div id="container"> <div id="left">line one</div> <div id="right">line one<br/>line two</div> </div> Is there a way to have the left and right divs align at the bottom li ...

htmlcss

Is there a way to replicate input data from one website onto a totally separate platform?

I am currently working on a hotel website using the user-friendly WYSIWYG site builder, Wix (yes, I know, don't judge). Like all hotel websites, we need a form for customers to enter their details for reservations and other purposes. However, there&a ...

javascriptjqueryhtmlformsvelo

Guide on implementing autocomplete in Angular Material with a dynamic SQL data source

I struggled to get it working using the mat-table option and even searched on YouTube, only finding hard-coded autocomplete examples. I have included some relevant code segments - thank you for your assistance. Visit this link for more information on Angu ...

javascripthtmlangulartypescript

What is the Best Way to Apply a Mask or Clip to an Image Using CSS?

Current Scenario: I am working within the Bootstrap framework, meaning that everything needs to be responsive to fit within the column container. I have images that are in a 16:9 ratio, but I need them clipped to be around 40:27 while still being respons ...

css

Can a Data Table and a grid be combined within an MVC View?

Is it possible to display data from a database table in a 2x3 grid format, which can be paginated for easy navigation without having to list everything vertically? I currently have the following code that displays all the data one after the other, but I wo ...

htmlasp.net-mvcasp.net-mvc-4

Tips for containing bleach spills in Markdown using the ">" quotation tag:To prevent bleach from escaping, utilize the blockquote

My current method of sanitizing user input involves using bleach and Markdown. However, I am facing an issue where the blockquote > symbol is being escaped as & gt; instead of passing it through for rendering with misaka. The documentation mentions ...

pythonhtmldjangomarkdownsanitization

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...

cssgoogle-fonts

tips for getting the sidebar to close immediately after it has been clicked

My understanding of how the menu sidebar works is a bit unclear, but here's my issue. I want the menu sidebar to close automatically when a user clicks on a menu link item or anywhere on the body. Then, it should reopen when the menu icon is pressed. ...

htmljquerycss

Is there a way to create a universal script that works for all modal windows?

I have a dozen images on the page, each opening a modal when clicked. Currently, I've created a separate script for each modal. How can I consolidate these scripts into one for all modals? <!-- 1 Modal--> <div class="gallery_product col-lg-3 ...

javascripthtmlcssbootstrap-4bootstrap-modal

Is Internet Explorer freezing when appending the jQuery Library with document.write?

Similar question: Why is splitting the <script> tag necessary when using document.write()? I have this snippet of code on my webpage : var print_popup = window.open("", "Booking", "width=950,height=680, scrollbars=1") ...

jqueryhtmlpopup

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

What methods are available for generating a short-lived banner using JavaScript?

I recently entered this industry and am in the process of constructing a website. Utilizing HTML and CSS, I crafted a cookie notification banner. I am seeking guidance on how to ensure that it only appears once "every 24 hours for each user." I attempted ...

javascripthtmlcsscookiesbanner

Is it possible to extract link text when clicked on?

Could someone help me with coding a feature for my website where clicking on a link not only opens the page but also copies the link text to the user's clipboard? Appreciate any assistance, thank you! ...

javascripthtmlweb