The SCSS file fails to load properly on the live server for the index.html page

My SCSS code does not seem to be working on my live HTML file server. I tried setting the background color to red, but it's not displaying correctly. The CSS link in the HTML file appears to be correct. Unfortunately, I can't include too much code here. Please let me know if you need more context.

Please help me troubleshoot this issue!

Thank you!

Here is a snippet of my HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The 2021 Frontend Developer Crash Course</title>
    <link rel="stylesheet" href="css/main.css"/>
 

And here is a snippet of my SCSS file:

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&display=swap");
body {
  background: #d81c1c;
  margin: 0;
  font-family: "Poppins";
}

.navbar {
  background: rgb(173, 25, 25);
}

Answer №1

It appears that there are a few issues in your code.

Firstly, as Akshay pointed out, there seems to be a typo in your css file where 'ody' is used instead of 'body'.

Secondly, when specifying a color for the background, it is recommended to use background-color rather than just background, which is typically used for assigning images.

Additionally, it's important to note that scss files need to be compiled down to css. I assume you are compiling your main.scss file to main.css using Visual Studio?

To ensure that your css is correct, I suggest using Chrome's developer tools. Simply press F12 in chrome, select the desired element, and then add the css styles under 'Styles'. This tool allows you to easily check and apply the css styles you want to use.

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

Leveraging keyboard input for authentication in Angular

Would it be possible to modify a button so that instead of just clicking on it, users could also enter a secret passphrase on the keyboard to navigate to the next page in Angular? For example, typing "nextpage" would take them to the next page. If you&apo ...

Bootstrap 5: The alignment of NAV items to the right is off

Is there a way to align the navigation items to the right side? I'm currently using Bootstrap 5 and leveraging the navigation feature. By default, the items are positioned on the left, however, I wish to move them to the right side. I have tried util ...

Preventing Users from Selecting Past Dates in an HTML Date Input Field

I am in the process of developing a website for scheduling doctor appointments. Within the form, users have the option to select the desired date for their appointment. However, I have encountered an issue where the 'date' input type allows users ...

How do you activate the background color for paragraphs <p> when a bootstrap button is styled with CSS?

In the code snippet provided below, dynamic creation of paragraphs with changing background colors and styles is demonstrated. One challenge faced in this script is maintaining the printed background colors for each dynamically generated paragraph. The is ...

Issue with nav-pill not functioning properly on localhost server set up with XAMPP

<!-- Customized Navigation Pills --> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">My Home</a> </li> <li class="nav-item ...

Designing the appearance of jQuery widget containers

I am facing an issue where I cannot see any visual changes when attempting to modify the class #dialog .ui-dialog-titlebar. $(function() { $("#dialog").dialog(); }); #dialog .ui-dialog-titlebar { background-image: none; background-color: red; } &l ...

pressing the button without physically interacting with it

Searching for information on my home page is simple – just input text in a textbox and click on the search button (Page 1). On another page, you'll find a similar setup with a textbox, a button, and an iframe that displays results upon clicking the ...

Transferring vast amounts of data between two HTML pages exclusively on the client side

Imagine we have two separate pages: X.html and Y.html. Even though they are not from the same origin (different domain, port, etc.), I have the ability to edit both of them. My goal is to incorporate Y.html into X.html using an iframe. The content of Y.ht ...

Looking for an empty div with a background image to ensure a specific height and responsiveness

Can someone help me achieve the following requirements? An empty div with no content A background image set to the div The background image should be fluid/responsive on re-size, without fixed dimensions on the div I have tried several methods but can&a ...

Disabling vertical scrolling is achieved by binding this mousewheel event handler

On my website, I have implemented vertical scrolling without a scrollbar and one specific div also has horizontal scrolling without a scrollbar. The code I am using is as follows: (function() { function scrollHorizontally(e) { e = window.event || e ...

What is the process for submitting a post form to a server page that responds with JSON data back to the initiating page?

Greetings to everyone in the overflow. I am currently working on developing a mobile app using PhoneGap. The API I created is able to receive posted data and display JSON data on the screen. My question is, how can I transfer the JSON data (resulting fro ...

Tips for creating a responsive website header

My header includes a navigation bar, logo, and a brief description. I'm struggling to make it responsive. The navbar is fine with the hamburger icon, but my solution doesn't match the visual graphic I want for smaller viewports. How can I achiev ...

Error: Image size must be larger

While working on designing cards in cakephp, I encountered an issue when trying to display images wider than 600px - they extended beyond control! Oddly enough, using placeholder or dummy images doesn't cause any problems. Why is this happening? How ...

What is the best way to retrieve the text within a select tag based on its value?

Let's say I have a value 'v' stored in a variable called 'var', and I want to display Valvo (text corresponding to the value v). Any ideas on how to achieve this? ...

Guidelines for naming classes in scss when working with Next.js

Is it possible to use CSS naming conventions in SCSS files with Next.js and then import them into JavaScript using a different convention? // login.module.scss file: .login-button { // some scss styling } // Login.js file: import styles from './ ...

What is the process for Bootstrap-4 to substitute an HTML checkmark entity with its own style?

When I use the HTML entity &#10004; to create a checkmark on my page, it appears as desired - a simple black checkmark. However, after adding Bootstrap to my site, this checkmark is transformed into a bordered green checkbox with sharp corners. I am ...

How do I design a table containing 10 elements and include buttons for navigating to the first, previous, next, and last elements?

I am currently working on creating a table that includes columns for ID, firstName, and lastName. My goal is to display only 10 elements per page and also incorporate buttons for navigating to the first, previous, next, and last pages. Is there a way to m ...

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

Trying to create a responsive navigation but encountering issues when following these steps: 1. Resize the navigation to less than 940px 2. Activate the menu 3. Resize the browser again to more than 940px 4. The menu is no longer inline and appears messy ...

Reset input field value upon triggering a JavaScript alert

I am facing an issue with a dynamic field that receives its value from the database. I need to compare this value with an old value and trigger an alert if it is greater. In such cases, I want to reset the field back to an empty value. I am trying to achi ...

Struggling to halt the continuous motion

Trying to create a typewriting effect using HTML5 has been quite the challenge. To bring it all together, I've turned to the pixi.js plugin. While I have managed to get it partly working, it appears that the update() method responsible for updating t ...