Blogr landing page solution with HTML, CSS, JS

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  This motivates me to pick up this challenge 😃 layout is responsive and functional and looks very solid, If you need help on accessibility I'll be glad to help, You have some issues that I haven't encountered yet so maybe I can learn something myself, Your call anyway.

  • About media query question, only talking about inheriting from upper media query makes me confused, I have never seen it before but I'm not sure if it's possible, but even if it is, It doesn't sound like a good approach IMO.

  • About background issue I certainly need some help myself 😅

  • If you want to start using sass, here is a great folder architecture which saved me from a lot of headaches, there are so many folder structures out there but this one works for me the best. They also provide boilerplate which you can find here. If you were interested in this, I use same structure on my repo which has all the media query mixins based on freecodecamp's breakpoint guide, also I added sr-only,hide-for-mobile,hide-for-desktop classes and removed some default styles which saves me from lot of repetition in the long run, feel free to use it on your own projects. (here is the repo)

  I hope this helps and keep coding 👏

  Marked as helpful

  1

  ---

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @Yazdun I finally found a way to display my background-image properly, by playing with @media and min-width only, look at this :

  @media screen and (min-width: 1050px) {
    #section-1 {
      background-position: center right -375px;
    }
  }
  
  @media screen and (min-width: 1200px) {
    #section-1 {
      background-position: center right -280px;
    }
  }
  

  Something like that allows you to inherit from the "sibling" media query. Don't know if it's a good practise, but maybe it can help you !

  By the way, I noticed using min-width properties is generaly better than big paddings. It avoids you to break design before breakpoints.

  1
• 

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  I will correct HTML issues tomorrow !

  0