Skip to main content
BigDingus
Inspiring
Oct 8, 2018 10:41 PM UTC
Answered

Expected RBRACE

Can anyone tell me why I get this error:

Thanks

    This topic is closed to new replies. Start a new post to keep the conversation going.
    pziecina
    pziecinaCorrect answer
    Legend
    Oct 9, 2018 1:22 PM UTC

    You are missing the closing brace from all your media-queries.

    From -

    /* Mobile */

    @media (max-width: 320px) {

    .logo {

        width: 100%;

    Onwards

    View reply

    17 replies

    BigDingusAuthor
    Inspiring
    Oct 9, 2018 1:08 PM UTC

    Gave it a try pziecina but just the same.

    Seeing the code with colours can be easier sometimes.

    Jon the full CSS code:

    @charset "UTF-8";

    .body {

        font-family: Brush Script MT, cursive; font-size: 40px; font-style: normal; font-variant: normal; font-weight: 700;

        margin: 0;

        margin-bottom: 20px;

        background-color: #191717;

    }

    .container {

        margin-left: 0 auto;

        margin-right: 0 auto;

        background-color: #191717;

    }

    .PageTitle {

        position:absolute;

        text-align: center;

        margin: 0 auto;

        width: 100%;

        top: 160px;

        border: none;

        outline: none;

        background-color: transparent;

        color: #FFFFFF;

        font-size: 60px;

        Z-index: 1;

        opacity: 0.5;

    }

    .Page {

        align-content: center;

        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 25px;

    }

    .tabs {

        border-radius: 20px;

        margin-bottom: 40px;

        padding-top: 20px;

        padding-bottom: 20px;

        height: 60px;

        border: 1px solid #FFFFFF;

        text-align: center;

        vertical-align: middle;

        width: 99%;

        margin-top: 25px;

        margin-left: 6px;

        margin-right: 6px;

        font-family:  Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 25px;

        color: #BCB9B9;

    }

    .h1 {

        margin-top: 80px;

        width: 100%;

        background-color:#191717;

        font-family:  Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 25px;

        color: #BCB9B9;

        text-align: center;

        padding-top: 0px;

        float: left;

    }

    .header {

        padding-top: 0px;

        width: 100%;

        height: auto;

        padding-bottom: 0px;

        background-color: #191717;

        text-align: center;

        font-size: 80px;

        font: italic;

        letter-spacing: 10px;

        color: #BCB9B9;

        border-bottom: 2px solid #BCB9B9;

    }

    /* Slideshow container */

    .slideshow-container {

      max-width: 1000px;

      position: relative;

        margin-top: 30px;

      margin: auto;

    }

    /* Next & previous buttons */

    .prev, .next {

      cursor: pointer;

      position: absolute;

      top: 50%;

      width: auto;

      padding: 16px;

      margin-top: -22px;

      color: white;

      font-weight: bold;

      font-size: 50px;

      transition: 3.6s ease;

      border-radius: 0 3px 3px 0;

    }

    .next {

      right: 0;

      border-radius: 3px 0 0 3px;

    }

    .prev:hover, .next:hover {

      background-color: rgba(0,0,0,0.8);

    }

    .fade {

      -webkit-animation-name: fade;

      -webkit-animation-duration: 1.5s;

      animation-name: fade;

      animation-duration:1.5s;

    }

    @-webkit-keyframes fade {

      from {opacity: .4}

      to {opacity: 1}

    }

    @keyframes fade {

      from {opacity: .4}

      to {opacity: 1}

    }

    /* On smaller screens, decrease text size */

    @media only screen and (max-width: 300px) {

      .prev, .next,.text {font-size: 11px}

    }

    .logo {

        font-family: "Lemon Jelly Personal Use";

        margin-left: auto;

        margin-right: auto;

        text-align: center;

        padding-top: 15px;

        vertical-align: middle;

    }

    .text_column {

        width: 100%;

        text-align: left;

        font-weight: lighter;

        line-height: 25px;

        float: left;

        padding-left: 20px;

        padding-right: 20px;

        color: #BCB9B9;

    }

    .intro {

        background-color: #191717;

        padding-bottom: 35px;

    }

    .img-circle {

        border-radius:25%;

    }

    .column {

        margin-top:20px;

        width: 25%;

        height: 300px;

        padding-left: 20px;

        background-color:#191717;

        text-align: center;

        padding-top:40px;

        float: left;

    }

    .column2 {

        margin-top: 20px;

        width: 65%;

        height: 300px;

        padding-left: 40px;

        background-color:#191717;

        font: italic;

        font-family:  Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 25px;

        color: #BCB9B9;

        text-align: left;

        padding-top: 0px;

        margin-left: 30px;

        float: left;

    }

    .intro {

        display: inline-block;

        background-color: #191717;

    }

    .intro .column h3 {

        color: #BCB9B9;

        text-align: center;

    }

    .intro .column p {

        color: #BCB9B9;

        font: bolder;

        font-size: large;

    }

    .gallery {

        vertical-align: top;

        clear: both;

        display: inline-block;

        background-color: #191717;

        padding-bottom: 35px;

        padding-top: 0px;

        margin-bottom: 0px;

        width: 100%;

    }

    .gallery > div {

        display: inline-block;

        display: -moz-inline-box;

        display: inline; /* For IE7 */

        zoom: 1

            0.; /* Trigger hasLayout */

        margin-left: 2%;

        width: 20%;

        text-align: center;

    }

    .thumbnail {

        width: 25%;

        height: 180px;

        text-align: center;

        float: left;

        margin-top: 0px;

        background-color: #191717;

        padding-bottom: 20px;

        margin-left: 0%;

        margin-right: 0%;

        border-radius: 0px;

        padding-top: 40px;

        border-bottom: 4px solid #BCB9B9;

    }

    .thumbnail2 {

        width: 25%;

        height: 600px;

        text-align: center;

        float: left;

        margin-top: 0px;

        background-color: #191717;

        padding-bottom: 20px;

        margin-left: 0%;

        margin-right: 0%;

        border-radius: 0px;

        padding-top: 40px;

        border-bottom: 4px solid #BCB9B9;

    }

    .gallery .thumbnail2 h4 {

        margin-top: 0px;

        margin-bottom: 0px;

        color: #BCB9B9;

        text-align: center;

        text-decoration: underline;

        letter-spacing: 4px;

        padding-left: 20px;

        padding-right: 20px;

    }

    .gallery .thumbnail2 p {

        margin-bottom: 30px;

        width: auto;

        height: auto;

        color: #BCB9B9;

        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 20px;

        text-align: left;

        letter-spacing: 2px;

        padding-left: 20px;

        padding-bottom: 20px;

    }

    .gallery .thumbnail h4 {

        margin-top: 0px;

        margin-bottom: 0px;

        color: #BCB9B9;

        text-align: center;

        text-decoration: underline;

        letter-spacing: 4px;

        padding-left: 20px;

        padding-right: 20px;

    }

    .gallery .thumbnail p {

        margin-bottom: 30px;

        width: auto;

        height: auto;

        color: #BCB9B9;

        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 20px;

        text-align: left;

        letter-spacing: 2px;

        padding-left: 20px;

        padding-bottom: 20px;

    }

    .cards {

        width: 100%;

        height: 230px;

        max-width: 400px;

        opacity: 1.0;

    }

    .intro .column p {

        padding-left: 30px;

        padding-right: 30px;

        text-align: justify;

        line-height: 25px;

        font-weight: bolder;

        margin-left: 20px;

        margin-right: 20px;

        width: 80%;

        margin-top: 4%;

    }

    .button {

        width: 440px;

        margin-top: 12px;

        margin-right: auto;

        margin-bottom: auto;

        margin-left: auto;

        padding-top: 10px;

        padding-right: 10px;

        padding-bottom: 20px;

        padding-left: 10px;

        text-align: center;

        vertical-align: middle;

        border-radius: 80px;

        text-transform: uppercase;

        font-weight: bold;

        letter-spacing: 6px;

        border: 1px solid #FFFFFF;

        transition: all 0.83s linear;

    }

    a {

        color: #BCB9B9;

    }

    .button:hover {

        background-color: #FF0000;

        color: #BCB9B9;

        cursor: pointer;

        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

    }

    .hero_header {

        color: #BCB9B9;

        text-align: center;

        margin: 0;

        letter-spacing: 10px;

    }

    .copyright {

        font-family:  Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 30px;

        text-align: center;

        height: 40px;

        padding-top: 20px;

        padding-bottom: 20px;

        background-color: #717070;

        color: #FFFFFF;

        text-transform: uppercase;

        font-weight: lighter;

        letter-spacing: 10px;

        border-top-width: 2px;

    }

    .WebDesign {

        float: right;

        font-size: 8px;

        letter-spacing: 2px;

        padding-top: 10px;

        padding-right: 50px;

    }

    .footer {

        font-family:  Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 20px;

        background-color: #191717;

        padding-top: 0px;

        padding-bottom: 60PX;

    }

    .profile {

        width: 60%;

    }

    .gallery .thumbnail .tag {

        color: #FFFFFF;

        padding-bottom: 4px;

        padding-top: 4px;

        text-align: left;

        padding-left: 20px;

        padding-right: 20px;

    }

    .back-to-top {

        position: fixed;

        width: 150px;

        bottom: 60px;

        right: 130px;

        border: none;

        outline: none;

        background-color: transparent;

        color: #FFFFFF;

        cursor: pointer;

        padding: 15px;

        border-radius: 30px;

        font-size: 18px;

        Z-index: 99;

    }

    .back-to-top:hover {

        background-color: transparent;

        border: 2px solid #BCB9B9;

    }

    /* Mobile */

    @media (max-width: 320px) {

    .logo {

        width: 100%;

        text-align: center;

        margin-top: 13px;

        margin-right: 0px;

        margin-bottom: 0px;

        margin-left: 0px;

    }

    .text_column {

        width: 100%;

        text-align: justify;

        padding: 0;

    }

    .intro .column p {

        width: 80%;

        margin-left: 0px;

    }

    .text_column {

        padding-left: 20px;

    }

    .thumbnail {

        width: 100%;

    }

    .column {

        width: 100%;

        margin-top: 0px;

    }

    .hero_header {

        padding-left: 10px;

        padding-right: 10px;

        line-height: 22px;

        text-align: center;

    }

    /* Small Tablets */

        @media (min-width: 321px)and (max-width: 767px) {

    .logo {

        width: 100%;

        text-align: center;

        margin-top: 13px;

        margin-right: 0px;

        margin-bottom: 0px;

        margin-left: 0px;

    }

    .text_column {

        width: 100%;

        text-align: left;

        padding: 0;

    }

    .thumbnail {

        width: 100%;

    }

    .column {

        width: 100%;

        margin-top: 0px;

    }

    .thumbnail {

        width: 100%;

    }

    .text_column {

        padding-left: 20px;

        padding-right: 20px;

        width: 90%;

    }

    .column {

        width: 100%;

        margin-left: 0px;

        margin-right: 0px;

    }

    .profile {

        width: 100%;

    }

    .intro .column p {

        width: 90%;

        text-align: center;

        padding-left: 0px;

    }

       

    /* Small Desktops */

            @media (min-width: 768px) and (max-width: 1096px) {

    .text_column {

        width: 100%;

    }

    .thumbnail {

        width: 48%;

    }

    .text_column {

        width: 90%;

        margin: 0;

        padding: 20px;

    }

    .intro .column p {

        width: 80%;

        text-align: center;

        padding-left: 0px;

    }

    Translate
    pziecina
    pziecinaCorrect answer
    Legend
    Oct 9, 2018 1:22 PM UTC

    You are missing the closing brace from all your media-queries.

    From -

    /* Mobile */

    @media (max-width: 320px) {

    .logo {

        width: 100%;

    Onwards

    Translate
    BigDingusAuthor
    Inspiring
    Oct 9, 2018 1:27 PM UTC

    It was that simple. Thanks pziecina

    Translate
    BigDingusAuthor
    Inspiring
    Oct 9, 2018 12:26 PM UTC

    I gave it a go guys. The fault just moved.

    Translate
    pziecina
    pziecina
    Legend
    Oct 9, 2018 12:30 PM UTC

    Move the line 529 brace to be directly below the line 528 brace then press return/enter and then save.

    Is it then showing an error?

    Translate
    BigDingusAuthor
    Inspiring
    Oct 9, 2018 10:37 AM UTC

    That's the problem Ben. when I do that Dreamweaver shows a problem. (See 1st imag)

    Translate
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Oct 8, 2018 10:53 PM UTC

    Is there an unclosed media query above the code you showed us?

    Translate
    Nancy O'Shea— Product User & Community Expert
    BigDingusAuthor
    Inspiring
    Oct 9, 2018 12:31 AM UTC

    There is indeed, but if I remove it from this on line 512

    I get an LBRACE on 513 instead

    I can live with it as my page works fine as is.

    I just wanted to be tidy.

    Translate
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    Oct 9, 2018 3:34 AM UTC

    The code should look like

    @media (min-width: 768px) and (max-width: 1096px) {

         ......

         style rules that ar subjected to this media query

         ......

    } /*closing bracket*/

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices