Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Thomas
Michael Thomas
10,319 Points

Flexbox Problem / Question

Hello, I'm currently trying to develop a website and I'm trying to introduce some flex box elements into it.

Although I have a problem. I don't seem to get the flexbox content next to each other... I have defined flexbox-direction: row but it keeps on acting like "column" The "Cards" don't want to flow next to each other but prefer to stack on top of each other.

Anyone can see what I'm doing wrong?

After a quick check:

Apparently it does work in Chrome (Mac), not in Safari (Mac) (haven't tested Firefox, nor IE) In Chrome I have a separate problem where I use flexbox to create the slider with the choreographers, which does work in safari... but not in Chrome

I'm completely confused.

url: hdac flexbox page

CSS code: (SCSS)

.choreo-main-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  @media only screen and (min-width: 540px) {
    width: 90%;
    margin: 0 auto;
  }

  @media only screen and (min-width: $mediabig) {
    max-width: 1100px;  
  }
}

.choreo-card {
  width: 90%;
  display: block;
  max-width: 250px;
  background: $color-white;
  border-radius: 5px;
  border: 1px solid $color-gray-border;
  margin-bottom: 32px;
  margin-bottom: 2rem;
  padding: 0;
  box-shadow: 10px 10px 5px #888888;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s ease-in-out;
  padding-bottom: 16px;
  padding-bottom: 1rem;

  &:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  .choreo-image {
    width: 100%;
    border-radius: 5px 5px 0 0;
  }

  h2, a, p {
    margin: 16px 16px;
    margin: 1rem 1rem;
  }

2 Answers

Robert Andrade
Robert Andrade
7,554 Points
Robert Andrade
Robert Andrade
7,554 Points

The thing you may want to do is look at this site: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

I can tell you that with Safari you need the following attached to your code "-webkit". I did look at the site in IE11 and it appears to work just fine

The big thing that sticks for me is the following:

" @media only screen and (min-width: $mediabig) { max-width: 1100px;
} "

$mediabig means nothing to me. I personally would have applied an exact value to the min-width feature.

The other troubling thing, at least from my perspective is the amount of doubles you have in your CSS: " h2, a, p { margin: 16px 16px; margin: 1rem 1rem; } "

" .choreo-card { ......... margin-bottom: 32px; margin-bottom: 2rem; ........... box-shadow: 10px 10px 5px #888888; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); ................ padding-bottom: 16px; padding-bottom: 1rem "

From what I remember of CSS the last property entry cancels out the previous one which means that only one of the margins is actually working as is one of the box-shadows and one of the padding-bottoms.

What I really would do is try to clean up the CSS first. I would also wonder if flexbox is actually something I was really wanting to use. Would float work better? or even Grid?. Just my thoughts and I am sure someone may have better advice.

Michael Thomas
Michael Thomas
10,319 Points

Robert, thank you for your answer, but there is no reason at all to clean up my CSS. Also the prefix is not the issue, I should have told you I'm working with my own gruntfile and that autoprefixes for me.

  • I told you it is SCSS so I work with variables, $mediabig is a variable, which is defined as an exact value in my SCSS file.

  • The doubles (cfr. margin: 16px 16px, margin: 1rem 1rem) are necessary for browser fallback... older version of IE and other browsers don't understand the "rem" value yet. so in modern browsers the pixel rule get cancelled out, browsers not understanding rem will ignore that CSS rule and use the pixel version instead.

  • The box shadow is indeed a little error of my side, since I improved the box shadow and the non-rgba one should be deleted, but again that will have no impact at all on my flexbox.

  • I prefer experimenting with newer CSS technologies. That's why I come and ask for help to figure them out ;)

Anyway:

I fixed it by now, seems like flex-basis: auto is quite quirky on safari.

using

flex-basis: 250px / 15em

makes everything work in safari.

so instead of using 

flex: 0 1 auto

(which works perfectly in Chrome) you need to use 

flex: 0 1 "width here"

to make it work in Safari.

Robert Andrade
Robert Andrade
7,554 Points
Robert Andrade
Robert Andrade
7,554 Points

I am glad you got it to work. It does look good.