Level 15 lesson 6 order value not accepted

Question

Level 15 lesson 6 order value not accepted

Even after the value for order-negative is given as -1 and value 2 for order-last, the compiler states that "
Use the order property for the class order-negative with the right value." after clicking on the submit .

code used:
<!DOCTYPE html>
<html>
<head>
<title>CSS Flex Flow</title>
<style>
.flex-container{
background-color: #4535AA;
padding: 10px;
display: flex;
flex-flow: row wrap;
}
.flex-item{
background-color: white;
margin: 20px;
padding: 20px;
width: 200px;
}

.order-negative {
order: <-1>;
background-color: #FFB643;
}

.order-last {
order: <2>
background-color: #ED639E;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item order-last">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
<div class="flex-item order-negative">Item 7</div>
<div class="flex-item">Item 8</div>
</div>
</body>
</html>

css

one year ago by DikshitaB

1 Answer

Login / Signup to Answer the Question.

Login Signup

**sam5epi0l** · Answer 1 · 2023-05-17T00:27:32

Hi, Remove the angle brackets enclosing value of order property, Like the code below:



<!DOCTYPE html>

<html>

<head>

        <title>CSS Flex Flow</title>

        <style> 

                .flex-container{

                        background-color: #4535AA;

                        padding: 10px;

                        display: flex;

                        flex-flow: row wrap;

                }

                .flex-item{

                        background-color: white;

                        margin: 20px;

                        padding: 20px;

                        width: 200px;

                }



                .order-negative {

                        order:-1;

                        background-color:#FFB643;



                }



                .order-last {

                        background-color:#ED639E;

                        order:2;



                }

        </style>

</head>

<body>

        <div class="flex-container">

                <div class="flex-item order-last">Item 1</div>

                <div class="flex-item">Item 2</div>

                <div class="flex-item">Item 3</div>

                <div class="flex-item">Item 4</div>

                <div class="flex-item">Item 5</div>

                <div class="flex-item">Item 6</div>

                <div class="flex-item order-negative">Item 7</div>

                <div class="flex-item">Item 8</div>

        </div>

</body>

</html>

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Level 15 lesson 6 order value not accepted

1 Answer

Login / Signup to Answer the Question.