Mobile First design, Vanilla CSS & HTML5

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋 Hi George Al Ismail! My name is Vanza. I have some feedbacks that might help you make it better. So, first for the .bg-image I think it would much better if you do this:

  /* OPTIONAL */
  body {
    position: relative;
  }
  
  /* For the top */
  /**
  * 1. Make it out of the normal flow, so that the text can stand on the top of the background
  * 2. Make on the top left of the page
  */
  .bg-image-top {
    position: absolute; /* 1 */
    top: 0; /* 2 */
    left: 0; /* 2 */
  }
  
  /* And then you can create the bottom one */
  .bg-image-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  

  And the for the .container2, you can add margin: 0 auto to make it center horizontally. Last but not least, if you struggle to format your code, you can use prettier to format it for you. I think that's it! Hopefully this feedback can help you make this project better 😉.

  1

  ---

  

  George Al Ismail•200

  @maotao11Posted over 3 years ago

  @vanzasetia Thank you for the feedback! i actually struggled a bit with the background, so your tip is very helpful !

  0

  

  Giovani•90

  @giovanibulianPosted over 3 years ago

  Hi @maotao and @vanzasetia !

  Just to share something I've just learned and give one more option, in my solution I used background properties to set both images. Here is my code:

  background-image:
          url(../images/bg-pattern-top-mobile.svg),
          url(../images/bg-pattern-bottom-mobile.svg);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  

  I've learned how to do it from this video: Controlling background-images | CSS Tutorial. I hope it's useful somehow!

  Happy coding!

  2

  

  George Al Ismail•200

  @maotao11Posted over 3 years ago

  @giovanibulian That looks pretty clean as well, thanks for sharing it!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @giovanibulian This is absolutely useful for me! I personally always having struggle putting background on the right position! Thank you for the video link!

  0