Using React with vanilla CSS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey! I suggest you center the component on the page with Flexbox, by giving the parent element App the following properties:

  .App {
      background-color: var(--Light-Gray);
      /* padding: 4.5em 2em 4.8em;       <---Remove */
  
     display: flex;    /* <---- Add */
     justify-content: center;    /* <---- Add */
     align-items: center;    /* <---- Add */
     min-height: 100vh;    /* <---- Add */
   }  
  
  @media (min-width: 800px)
  .container {
      border-radius: 0.5em;
      box-shadow: 0 15px 20px 0 #c5d4ec;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-template-rows: 13.5em 16.2em;
      /* margin-left: auto;  <---Remove */
      5.7em: ;
      width: 39.7em;
  }
  

  • I suggest you add cursor: pointer; to the button, The cursor indicates to users there is an action that will be executed when clicking on it.

  Hope this is useful to you... Keep coding👍

  0

  ---

  

  akaigyouhou•300

  @akaigyouhouPosted over 2 years ago

  @Bayoumi-dev hi, thank you for your replay. Actually I've tried your suggestion about the the flex box. But it doesn't work in this situation. (the padding-left and -right are missing, and it doesn't work in 375x667, which is typical iphone se screen ). According to the design (which is 375x870), I guess it is a mobile screen that you cannot cover in one page. So to use height of 100vh will shrink the content and doesn't match the origin design. I would like to use flex box for mobile screen. But it seems not match to this situation. Thanks again for your replay!

  0

  

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  @akaigyouhou Leave the padding as is, just for the small screens...

  you are right when using 'height' 100vh will shrink the content, but I suggested you use 'min-height: 100vh' which respects the component height and doesn't shrink. Try what I suggested and if it doesn't work I won't write any line of code again 😂😅

  .App {
    background-color: var(--Light-Gray);
    /* opacity: 0.5; */
    padding: 4.5em 2em 4.8em;         /* <---- Changed */
  
    display: flex; /* <---- Add */
    justify-content: center; /* <---- Add */
    align-items: center; /* <---- Add */
    min-height: 100vh; /* <---- Add */
  }
  
  .container {
    box-shadow: 0px 10px 20px 0 hsl(218, 51%, 85%);
  }
  
  @media (min-width: 800px) {
    .App {
      /* height: 100vh;   <---Remove */
    }
    .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 13.5em 16.2em;
      /* margin-left: auto;   <---Remove */
      /* margin-right: auto;   <---Remove */
      /* margin-top: 5.7em;   <---Remove */
      width: 39.7em;
      border-radius: 0.5em;
      box-shadow: 0px 15px 20px 0 hsl(218, 51%, 85%);
    }
  }
  
  

  Good Luck!

  Marked as helpful

  0

  

  akaigyouhou•300

  @akaigyouhouPosted over 2 years ago

  @Bayoumi-dev thank you again. I've tried your method. It works. But since I cannot remove the padding for the mobile screen, I am not quite sure the reason or the benefit to do that, or the principle of using padding or flex or even grid. I am not very proficient in css layout so I always use design as background and adjust the padding or margin bit by bit, which should not be a good practice? And I usually see height to 100vh for desktop if the design seems like a whole page screen and cannot be scrolled. Thank you again for your kind suggestion!

  0