Mobile first site, using CSS and BEM

Community feedback

• 

  Yakub•260

  @Yakub-EgamnazarovPosted over 3 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.

  Marked as helpful

  0
• 

  alec•775

  @AlecANLPosted over 3 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

  Marked as helpful

  0
• 

  eagermonument81•210

  @ixtkPosted over 3 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

  1

  ---

  

  Sodja Nathan O.•205

  @NateOsPosted over 3 years ago

  @Ikhcamot yep, I kinda réaliséd I repeat a lot of css, working on that... Also with the inconsistencies, I just had to keeps eyeballing to see what works, probably why, also maybe because I was strictly focused on catering to 375px and 1440px devices

  0
• 

  Mwangi•0

  @kagaiPosted over 3 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 ?

  0

  ---

  

  Sodja Nathan O.•205

  @NateOsPosted over 3 years ago

  @kagai I started with mobile 375 first and had everything flow as designed, so when switching to desktop 1440,flex reverse became the obvious way to have what was in the design

  0

  

  Sodja Nathan O.•205

  @NateOsPosted over 3 years ago

  @kagai I started with mobile 375 first and had everything flow as designed, so when switching to desktop 1440,flex reverse became the obvious way to have what was in the design

  0
• 

  Sodja Nathan O.•205

  @NateOsPosted over 3 years ago

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

  0