Display: flex;


#1

https://www.codecademy.com/en/courses/make-a-website/lessons/boundaries-space/exercises/display-flex?action=lesson_resume

I keep getting the below error when I try to run the code. Am I making a stupid mistake that I can't see or is there a problem? The other threads on this problem are closed. Is there a way to pass this step in the lesson and continue?
Any help would be great, other than this problem I am on a roll today!

Error message:
Did you add a display of flex to the .gallery selector in main.css?


.gallery {
  display: flex;
  margin-top: 20px;
}


#2

This selector rule looks correct (for step 1). Are there any errors in the style sheet above this rule? That could cause this rule to not be read.


#3

I'm getting the same error message and this is my entire css sheet.

html, body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
}

body {
  font-family: 'Lato', sans-serif;
  background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg');
  background-position: center top;
  background-size: cover;
  margin: 0;
}

a {
  color: #204156;
  text-decoration: none;
}

.page-title {
  text-align: center;
  font-weight: 100;
}

.page-description {
  border: 1px solid #000;
  margin: 2px;
  text-align: center;
  padding: 30px;
}

.gallery {
  margin-top: 20px;
  display: flex;
}

.gallery-item {
  margin: 20px;
}

.gallery-item .thumbnail {
  border: 5px solid #fff;
}

/* FOOTER NAVIGATION */

nav {
  background-color: #FFF;
}

nav li {
  display: inline;
  margin: 0;
  padding: 0 10px;
}

nav ul {
  display: inline;
}

.contact-btn {
  float: right;
}

.contact-btn a {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;

}

.contact-btn a:active {

}

nav a {
  height: 60px;
  line-height: 60px;
  color: #204156;
  text-decoration: none;
}

#4

I don't see anything wrong with the rest of the stylesheet, at least in the syntax. I'm new to this though, so there may be something I have missed. I'm glad I'm not the only one with the problem though, hopefully one of the codecademy moderators will step in with a solution.


#5

This seems to be an ongoing issue among us fellow codecademians. Ummm, how do we opt "Get Code" Is that a feature only upgraded users can use? I'd really like to finish this entire lesson.


#6

Yeah, that's what it seems like. How long does a thread need to be open before a codecademy mod steps in?


#7

Hi @ashan411,

I have just reset my 9. Display: flex; exercise and then copy/pasted in your code and it passed. Could you try resetting and trying again?

You get the Get Code option after you have clicked Run several times without passing.


#8

Thank you Albionsrefuge, I've gotten past that step of the instructions. However, now I am having a similar problem with the next step (adding the flex-wrap). Is there something wrong with another section of the lesson?
This is everything from my main.css, any help would be greatly appreciated!

html body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
}

body {
  font-family: 'Lato', sans-serif;
  background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg');
  background-position: center top;
  background-size: cover;
  margin: 0;
}

a {
  color: #204156;
  text-decoration: none;
}

.page-title {
  text-align: center;
  font-weight: 100;
}

.page-description {
  border: 1px solid #000;
  margin: 2px;
  text-align: center;
  padding: 30px;
}

.gallery {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
}

.gallery-item {
  margin: 20px;
}

.gallery-item .thumbnail {
  border: 5px solid #fff;
}

/* FOOTER NAVIGATION */

nav {
  background-color: #FFF;
}

nav li {
  display: inline;
  margin: 0;
  padding: 0 10px;
}

nav ul {
  display: inline;
}

.contact-btn {
  float: right;
}

.contact-btn a {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;

}

.contact-btn a:active {

}

nav a {
  height: 60px;
  line-height: 60px;
  color: #204156;
  text-decoration: none;
}

#9

Actually, I just switched to Chrome and that seems to have solved it! Any idea why changing my browser would fix this problem?
Thanks!


#10

What was your last error message, anything about the size of an element?


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.