sign-up newsletter page with HTMl, CSS and JS native

Community feedback

• 

  Anwar Mestycer•420

  @AnwarMestycerPosted 8 months ago

  Hi, Márcio, you are on the right path; well done!

  • Try to use rem instead of px to give your element more flexibility on different screens.
  • Use media queries in CSS to match mobile screens and change the image on desktop and mobile screens.

  style.css

  @media screen and (max-width:600px ){
   .card-main {
       height: 100%;
       flex-direction: column-reverse;
   }}
  

  main.js

  const image=document.getElementByClassName("img-card")
  function imageAdjust (){
  
    if (window.matchMedia("(max-width: 900px)").matches) {
      image.src="/assets/images/illustration-sign-up-mobile.svg"
    }
    else{
      image.src="/assets/images/illustration-sign-up-desktop.svg"
    }
  }
  
  window.onload = imageAdjust;
  window.onresize = imageAdjust;
  

  This is just the beginning of your awesome journey as a front-end developer Keep up the good work.

  Hope this was helpful and if you need any help don't hesitate to contact me here.

  Marked as helpful

  0

  ---

  

  Márcio J. Silva•50

  @ImMarcioPosted 8 months ago

  @AnwarMestycer Thanks for tips, i'll do this in the nexts challenges

  0