Mobile first site, using CSS and BEM

Community feedback

• 

  Yakub•260

  @Yakub-Egamnazarov

  Posted about 4 years ago

  Hey Sodja, congrats on completing the project, it looks consistent in the required display width. Besides that, I would suggest using mixins in your SCSS files to include media queries for your CSS code, this will improve the speed of your project building. To visually improve your solution I would suggest using the transition CSS rule for a button or link elements when changing state, this would add a smooth transition. Cheers and happy coding.

  00

  Marked as helpful
• 

  alec•775

  @AlecANL

  Posted about 4 years ago

  Hey, Sodja Nathan. I'm not an expert, but I use these media queries: very small: 320px, medium: 480px, big: 768px, bigger: 1024px, very big: 1366px, and very, very big xD: 1920px.

  This does not mean do you use all media queries. Do you use required in your website or application, etc...

  And if you want to reduce the size of your css bundle, you may use sass with minify sass

  00

  Marked as helpful
• 

  eagermonument81•210

  @ixtk

  Posted about 4 years ago

  .bg-bottles {
      background: url("../images/desktop/image-gallery-milkbottles.jpg");
      background-repeat: no-repeat;
      height: 70vh;
      width: 25vw;
      background-size: cover;
      background-position: center bottom;
    }
    .bg-orange {
      background: url("../images/desktop/image-gallery-orange.jpg");
      background-repeat: no-repeat;
      height: 70vh;
      width: 25vw;
      background-size: cover;
      background-position: center bottom;
    }
    .bg-cone {
      background: url("../images/desktop/image-gallery-cone.jpg");
      background-repeat: no-repeat;
      height: 70vh;
      width: 25vw;
      background-size: cover;
      background-position: center bottom;
    }
  

  You could have used these individual selectors to set background image, then grouped the common properties

  .bg-bottles, .bg-orange, .bg-cone {
      background-repeat: no-repeat;
      height: 70vh;
      width: 25vw;
      background-size: cover;
      background-position: center bottom;
  }
  

  I don't know if you're using something to generate these. If not, you've duplicated code in this fashion in many places.

  • There's a horizontal scrollbar on desktop layout
  • At some widths, text is not properly positioned in the photography and design sections, they either fall out or have bad contrast
  • The contact link in mobile menu has small font compared to other menu items
  • There are padding inconsistencies on desktop layout near learn more links and photography and design section texts

  11
• 

  Mwangi•0

  @kagai

  Posted about 4 years ago

  Am curious as to why we have to use flex-direction to row -reverse instead of just having the image begin on the HTML , is there a specific reason for doing that ?

  02
• 

  Sodja Nathan O.•205

  @NateOs

  Posted about 4 years ago

  Will certainly use SASS for my next project,seems I have forgotten an awful lot of it. Thanks.

  00