Notifications using flexbox

Community feedback

• 

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  Hello @xingxing-prog

  • To make your site responsive you will have to use media queries, max-width, and width

  • For example, if you are using a mobile-first web-flow you should do something like this

  main{
      display:flex;
      flex-direction:column;
      justify-content:center;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      max-width:375px;
      width:100%
      margin:40px auto;
      padding: 15px 30px;
  }
  - Then for bigger screens you can use 
  

  main{
      display:flex;
      flex-direction:column;
      justify-content:center;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      max-width:800px;
      width:100%
      margin:40px auto;
      padding: 15px 30px;
  }
  

  • if you prefer mobile first then your media query will look like this

  @media screen and (min-width:768px){
  //your code goes here
  }
  

  • that is your media queries will have min-width

  • if you prefer desktop first your medial query will be

  @media screen and (max-width:768px){ //your code goes here }

  - that is your media queries will have max-width
  
  -Also do not put width on your body element as you did below
  
  

  body{ max-width:1440px; font-family: Plus Jakarta Sans;
  }

  0

  ---

  

  MX•290

  @xingxing-progPosted about 2 years ago

  @SatellitePeace Thanks for your commenting. You gave me very good point. But be honest, I still feel the css part for responsive is so tough for me.

  0

  

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  @xingxing-prog keep practicing as you practice you will start picking up these knowledge

  You can search for Kevin Powell in YouTube he has a course on responsive design which I think will help you a lot

  Happy Coding

  0