SCSS, flexbox

Community feedback

• 

  Declan•300

  @declanslevinPosted almost 5 years ago

  I'm curious what you're not happy about, it looks great!

  It's a matter of personal preference, but something I like to do with SASS is nest my media queries in the class declaration - something like:

  .page-container {
    display: flex;
    line-height: 1.5;
    flex-direction: column;
    justify-content: space-between;
  
    overflow: auto;
    height: 100vh;
    color: white;
    padding: 40px 80px;
  
    @media screen and (max-width: 675px) {
      text-align: center;
      padding: 2rem;
      height: 100vh;
    }
  
    .top-row {
      display: flex;
  
      @media screen and (max-width: 675px) {
        margin-bottom: 15px;
      }
  
      img {
        max-width: 100%;
        height: auto;
  
        @media screen and (max-width: 675px) {
          max-width: 50%;
        }
      }
    }
  

  You end up with more media queries, but this way your original declaration and media query declaration are right next to each other. When your .scss files end up being hundreds of lines long, if you need to change something, you don't need to keep scrolling up and down to change the value in 2 places :)

  1

  ---

  

  bwhitney2439•545

  @bwhitney2439Posted almost 5 years ago

  @declanslevin Thanks so much for feedback mate. Maybe I’m getting too critical. I can never get the layout consistent looking across different mobile devices without so use overflow: auto as a get out. I feel like it can be done with more elegant code. Great shout with the media qeuries in-line. Love that. Will be doing that from now on.

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  I'd agree with Declan here, your solution looks really good! Being critical and paying attention to detail (as you are) is a really good trait to have. But on this one, I'd say you've nailed it! 👍

  0