Newsletter Signup using Nextjs

Community feedback

• 

  Myk Escala•620

  @MikoyzskiePosted 10 months ago

  Hey chleighton1!

  • Clean code! Impressive.
  • If you're trying to implement mobile responsive site, there's no need of using states for that.
  • Tailwind actually has its own viewport width device width classnames for that
  • For example, if you want your component to be row on desktop and column on smaller screens, you can use "flex-col md:flex-row" since tailwind is a mobile first css framework
  • Also sm: / md: / lg: / xl: are min-width not max-width
  • Hope this helps

  Happy Coding!

  Marked as helpful

  0

  ---

  

  P

  Charles•110

  @chleighton1Posted 10 months ago

  Thank you @Mikoyzskie! Appriciate the feedback, will try out Tailwind width classnames on the next one!

  0
• 

  P

  solvman•1,650

  @solvmanPosted 9 months ago

  @chleighton1, great job completing the project!

  I agree with @Mikoyzskie; there is no need to use the state to toggle the responsive layout. Alternatively, to tailwind classes, you may use the HTML<picture> tag to source a different image for various viewport sizes. It could be implemented with a static component as so:

  import mobileImage from "../assets/images/illustration-sign-up-mobile.svg";
  import desktopImage from "../assets/images/illustration-sign-up-desktop.svg";
  
  const ResponsiveImage = () => {
    return (
      <picture>
        <source media="(min-width: 768px)" srcSet={desktopImage} />
        <img src={mobileImage} alt="" />
      </picture>
    );
  };
  
  export default ResponsiveImage;
  

  Use this <ResponsiveImage /> element in place of the image within your <MainCard />

  There is an excellent MSDN Article that goes over responsive images: Responsive Images

  I hope it helps!

  0