article-preview-component using HTML, CSS & JS

Community feedback

• 

  KapteynUniverse•2,150

  @KapteynUniversePosted 1 day ago

  Hey Sediqa, nice job.

  My flex on the main was a mistake, should have used it on the body. Since you used flex on the body, you can remove this:

  .main {
      /* display: flex; */
      /* align-items: center; */
      /* justify-content: center; */
      /* height: 100%; */
  }
  

  This change will make the container to touch left side of the screen below 400px screen size because of the width:87%; on the container. You can add a margin-inline: auto; to the container for that.

  I couldn't position the image in its container back then. For that you can add object-position: left; to the .drawers-image img.

  Name and date is not aligned with img and button on the y axis. An align-items: center; to the profile-section or align-self: center; to theprofile-name-section will fix it.

  Also a funny bug; above 1039px when you click the button and open social links, if you leave it as open and reduce the screen size to mobile layout and open the socials again, your second button stays invisible while socials are opening.

  I don't think on a real page anyone open a modal and change their screen size but while testing my page these things bugs me, that is why i try to reset styles on onresize :D

  I think changing toggleButton1.classList.remove('hidden'); to toggleButton2.classList.remove('hidden'); on resize function fixing this issue.

  window.addEventListener('resize', () => { 
    const w = window.innerWidth; if (w > 1039) { 
      profileSection.classList.remove('hidden'); 
      socialLinks.classList.add('hidden'); 
      toggleButton2.classList.remove('hidden'); 
    } 
  });
  

  Marked as helpful

  0

  ---

  

  sediqa•150

  @Hasani-SediqaPosted 1 day ago

  Hey @KapteynUniverse, Thanks a lot for your feedback. I'll modify my code.

  1
• 

  Oludare Suulola•90

  @osuulolaPosted 1 day ago

  Thank you for your design. I did not finish mine before I saw yours. I had not done the JS part of the job.

  1