What is causing the parse error in my CSS code?

Running into a parse error on line 314 of my css (style.css). The error is "} expected css(css-rcurlyexpected)". Even after adding the necessary curly brace, it still doesn't validate. Below is my CSS starting from line 314 till the end:


/* CSS code starts here */
.navbar{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: var(--nero);
    width: 100%;
}
.brand-and-toggler{
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
}
... <!-- Truncated for brevity -->

If anyone could provide some assistance or guidance on resolving this issue, it would be greatly appreciated!

css

Answer №1

Don't forget to close the brackets properly in each media query, copy this code and compare

/* #### navigation bar styling #### */
.navbar {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background: var(--nero);
  width: 100%;
}

.brand-and-toggler {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
}

.navbar-brand {
  text-transform: uppercase;
  font-family: var(--poppins);
  font-size: 1.7rem;
  font-weight: 800;
}

.navbar-toggler {
  border: none;
  font-size: 1.7rem;
  background: none;
  color: #FFFFFF;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
}

.navbar-toggler:hover {
  opacity: 0.8;
}

.navbar-collapse {
  height: 0;
  overflow: hidden;
  transition: var(--transition);
}

.nav-item {
  text-align: center;
  padding: 0.6rem;
  position: relative;
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: var(--transition);
}

.nav-item:hover::after {
  width: 100px;
}

.nav-link {
  text-transform: uppercase;
  font-size: 1.2rem;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--green);
}

.nav-active .nav-link {
  color: var(--green);
}

/*** show nav class ***/
.showNav {
  height: 385px;
}

/* #### HOME PAGE STYLING #### */
.home {
  padding: 5rem 0 2.5rem 0;
}

.home .row > div {
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--nero);
  border-radius: 10px;
  margin: 2rem 0;
}

.home .row-left {
  text-align: center;
}

.home .row-left h3 {
  color: var(--green);
  font-weight: 400;
  text-transform: uppercase;
}

.home .row-left h1 {
  font-size: 2rem;
  font-family: var(--poppins);
  text-transform: capitalize;
  line-height: 1.2;
  font-weight: 900;
}

.home .row-left h1 span {
  color: var(--green);
}

.home .row-left h2 {
  text-transform: uppercase;
  font-family: var(--poppins);
  font-size: 1rem;
}

.home-pg-btn {
  display: flex;
  margin: 1rem 0;
}

.home-pg-btn button {
  padding: 0.8rem;
  margin-right: 0.6rem;
  border: 1px solid #F7F7F7;
}

.home-pg-btn button:first-child {
  border-color: var(--green);
}

.home-pg-btn button:last-child {
  background: transparent;
  color: #FFFFFF;
}

.home .img-container {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
}

.home .img-border {
  background: var(--nero);
  width: 245px;
  height: 245px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #### footer styling #### */
.footer {
  padding: 2.5rem 0;
  border-top: 1.5px solid #252525;
}

.footer-title {
  text-transform: capitalize;
  font-size: 1.3rem;
  font-family: var(--poppins);
  font-weight: 700;
}

.footer .col {
  text-align: center;
  padding: 1rem 0;
}

.footer .col:first-child .text {
  width: 80%;
  margin: 0 auto;
}

.social-links {
  display: flex;
  justify-content: center;
}

.social-links a {
  background: var(--nero);
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 1.5rem 0.5rem;
  transition: var(--transition);
}

.social-links a:hover {
  background: var(--green);
}

.footer-links a {
  display: block;
  text-transform: capitalize;
  padding: 0.2rem 0;
  transition: var(--transition);
}

.footer-links a .fas {
  display: none;
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer .col:last-child div {
  padding: 0.2rem 0;
}

.footer .col:last-child .fas {
  padding-right: 0.5rem;
}

.footer-text .text {
  text-align: center;
}


/* #### Media Queries #### */
@media screen and (min-width: 500px) {
  /* styles for home page */
  .home .row-left h1 {
    font-size: 4rem;
  }

  .home .row-left h2 {
    font-size: 1.4rem;
  }

  .home-pg-btn button {
    padding: 1rem 1.5rem;
  }

  .home .img-container {
    width: 320px;
    height: 320px;
  }

  .home .img-border {
    width: 325px;
    height: 325px;
  }
}

@media screen and (min-width: 768px) {
  /* additional styles for footer */
  .footer .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 992px) {
  /* navbar adjustments */
  .navbar-toggler {
    display: none;
  }

  .navbar .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-nav {
    display: flex;
    justify-content: flex-end;
  }

  .navbar-collapse {
    height: 100%;
    flex: 1 0 auto;
  }

  .brand-and-toggler {
    flex: 0 0 100px;
  }

  .nav-item {
    margin: 0 0.5rem;
  }

  .nav-link {
    font-size: 1rem;
  }

  /* additional styles for home page */
  .home .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
  }

  .home .row > div {
    height: calc(100vh - 73px);
    border: none;
    margin: 0;
    align-items: flex-start;
  }

  .home .row-left {
    text-align: left;
  }

  .home .img-container {
    width: 100%;
    height: 100%;
    border-radius: unset;
  }

  .home .img-border {
    height: 90%;
    width: 100%;
    transition: var(--transition);
    border-radius: unset;
    background: transparent;
  }

  .home .img-border:hover {
    transform: translateY(-14px);
  }

}

@media screen and (min-width: 1200px) {
  /* additional styles for footer on larger screens */
  .footer .row {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer .row .col {
    text-align: left;
  }

  .footer .col:first-child .text {
    margin: 0;
  }

  .social-links {
    justify-content: flex-start;
  }

  .footer-links a .fas {
    display: inline-block;
  }
}

Answer №2

Just a heads up, it looks like you forgot to add an closing bracket at the end of your media query here:

@media screen and (min-width: 1200px) {

specifically after this part:

.footer-links a .fas {
  display: inline-block;
}

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

Is it necessary to add a line break after a span element generated by react, next, or bootstrap

There is a strange issue plaguing my code - I'm enclosing some text in a span tag and it's causing an unexpected line break. It's unclear whether React.js, Next.js, or Bootstrap is the culprit, but I can't seem to get rid of the pesky l ...

cssreactjsbootstrap-4next.js

Varying spacing among elements with identical classes

I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): https://i.sstatic.ne ...

htmlcsssass

Tips for wrapping a div around its floated children

I'm currently developing a website for an online shopping cart and working on making the search results responsive. I am aiming to display as many items as possible across the screen (usually 3) when viewed on any device with a resolution lower than t ...

javascripthtmlcsse-commerce

Grid-based layout for Bootstrap modal windows

Looking for assistance with aligning the buttons in the modal window to match the alignment of the input boxes. Here is the HTML code: <div> <form name="_form" class="form-horizontal" ng-submit="submit(_form)"> <div class="modal ...

htmlcsstwitter-bootstrapgrid

What's the CSS equivalent of Java's window.pack() method?

I'm relatively new to css and I'm attempting to create a border around a <div>. My goal is for the border to be limited to the size of the elements inside the div and adjust dynamically in proportion to any new objects that may appear or di ...

javascripthtmlcss

Automatically generating new lines of grid-template-columns with CSS grid

I am new to using grid in CSS and there are still some concepts that I don't quite understand. Below is the container I am working with: <section class="css-grid"> <div class="css-item"><img src="1.jpg" / ...

htmlcsscss-grid

What could be the reason for my Bootstrap collapse navigation bar not functioning properly?

<!DOCTYPE html> <html lang="en"> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> ...

htmlcsstwitter-bootstrap

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

I am working on creating a grid of Avatar images with a transition state where I want to show a skeleton representation of the image. To achieve this, I am using @material-ui/lab/Skeleton. The issue I'm facing is that since my images are set to autos ...

javascripthtmlcssreactjsmaterial-ui

What method is most effective for loading HTML content depending on the device being used?

Looking for the optimal method to load different div elements based on the device accessing my website without relying on user agent checks. As of now, I am utilizing CSS media queries to determine device specifications and display the appropriate div acco ...

htmlcss

When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening? Here is the CSS for t ...

htmlcsspositionoverflow

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

javascripthtmlcssbuttonmodal-dialog

Customizing TinyMCE's font style menu options

Our platform utilizes TinyMCE as in-place editors to allow users to make live edits to content. However, a challenge arises when using a dark background with light text, as TinyMCE defaults to using this text color rather than black. https://i.sstatic.net ...

cssreactjstypescripttinymce

The animation in CSS seems to be malfunctioning, but strangely enough, the exact same code works elsewhere

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

cssanimation

Vibrant diversity in a solitary symbol

I have customized styles to incorporate Fontawesome icons with their brand colors - for instance, the Opera icon appears in red, IE in blue, and Firefox in orange. Chrome, however, presents a unique challenge with its four distinctive colors. I am curious ...

cssfont-awesomefont-awesome-5

Add a blur effect to a specific region of an SVG image

I have a complex, dynamic SVG image created using jQuery SVG. I want to create a "popup" area that appears on top of all SVG elements in the canvas. To achieve a modern translucent iOS7 style, I would like to add a blur filter to everything beneath the pop ...

jqueryhtmlcsssvgsvg-filters

Is JavaScript generating a random sequence by dynamically adding fields?

I'm encountering an issue with my button that adds a set of text fields every time I click on the Add More button. The problem is that when I add new text fields, they are appended above the Add More button. Then, pressing the button again adds more t ...

javascriptphpjquerycssdynamic

Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

I'm still getting the hang of things, so I apologize if my question isn't perfectly clear. What I'm trying to do is create a dynamic progress bar with multiple colors that animates upon loading the page. I've seen some examples similar ...

javascriptjqueryhtmlcssprogress-bar

Text in SVG vanishes when label size increases

I've been exploring Morris.js for creating charts, which relies on SVG to generate graphs. I've shared a JSbin setup here: JSbin example One challenge with Morris.js is the X-Axis labels disappearing when they are too large. Adjusting the size o ...

cssgraphsvgchartsmorris.js

Animating CSS Pixel Fragments

After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: https://i.sstatic.net/Gl ...

javascripthtmlcssanimation

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

jqueryhtmlcss