QR Code Component using Vite, typescript, and Styled-Components

Community feedback

• 

  Santhosh Kumar•110

  @Iamsanthosh2203Posted over 1 year ago

  Hi there , When I visit your site on my computer its scrollable try to make it single page using the height of the //global conatiner// which contains all the //elements// inside... To make it single page use this example :

  HTML !!!

  <div class="global"> <main>///Your contents in here</main> </div>

  CSS !!! .global{ display:flex; height:100vh; justify-content:center; align-items:center; }

  This code will center the items to the middle of the screen

  Marked as helpful

  1

  ---

  

  timDeHof•30

  @timDeHofPosted over 1 year ago

  @Iamsanthosh2203 Thanks, I have made the necessary changes to the global styles for styled components.

  0
• 

  Stanley Nadar•370

  @istealersn-devPosted over 1 year ago

  Great efforts, especially using Typescript and styled components. With a bit of tweaks and fixes, you should be able to make it accessible and optimized to the best

  • Building a good HTML semantics for a better structure to the content while you build app using react/typescript is a must
  • You could have avoided the extra <div> by using React.Fragments or <> in your card component
  • To simply center card component, you can also use display: grid; place-content: center;
  • You have set fixed width for few elements, avoid setting fixed width, you should let it scale based on the content + padding, this supports responsive behavior and easy to implement
  • Lastly your final build of the application will also include the long list of styles from theme.ts which I think is not necessary (could be optimized)

  Hope this is helpful, keep coding!!

  0