IP Address Tracker using React and Tailwind

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 1 year ago

  Assalamu Alaikum Brother, Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • The method which you have used to apply background pattern need to be improved, currently you've written the css in a wrong way.

  ---

  • Here's you code,

  const Container = styled.div`
    @media (min-width: 375px) {
      background: url("../assets/pattern-bg-mobile.png") no-repeat;
      background-size: cover;
      height: 30vh;
    }
  
    @media (min-width: 768px) {
      background: url("../assets/pattern-bg-desktop.png") no-repeat;
      background-size: cover;
      height: 45vh;
    }
    z-index: 10;
  `;
  

  • You have not utilized the media queries you're using, the way you applied background can be improved by writing in this way,

    @media (min-width: 375px) {
      background: 0% / cover url("../assets/pattern-bg-mobile.png") no-repeat;
      height: 30vh;
    }
  
    @media (min-width: 768px) {
      background-image: url("../assets/pattern-bg-desktop.png");
    }
  

  • From the above example, we fully utilized the advantages of media query & shorthand css property.

  ---

  • Because the first media query has been applied on initial state after the query hits 768px the styles from 375px are still applied, So just changing background-image is enough.

  ---

  • Let me know your thoughts regarding this way of writing code.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Azam Mustufa•360

  @azammustafa66Posted about 1 year ago

  @0xAbdulKhalid Jazzkumullahu khairan bro will change

  0