Article Preview Page Card

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 12 days ago

  Hey David,

  Avoid using hard coded values. Most of the trouble comes from this. First remove height and width from main and add max-width.

  @media (min-width: 750px) {
      /* height: 72vh; */
      /* width: 85%; */
      max-width: 50rem; /* Change any value you prefer*/
  }
  

  main {
      /* height: 72vh; */
      /* width: 85%; */
  }
  

  Move button inside the profile-info and wrap img and profile-text with a div. I am guessing you used absolute positioning on button for the modal changes but remove position and margin left from button and use flex or grid on the profile-info.

  <div id="profile-info">
      <div class="thisOne">
           <img id="profile-pic" src="./images/avatar-michelle.jpg" alt="picture-of-avatar">
           <div class="profile-text">
               <p class="profile-name">Michelle Appleton</p> 
  /* It is ok to use p tag for small texts, div should be used only when no other semantic element is appropriate or as a container for HTML elements. */
               <p class="profile-start-date">28 Jun 2020</p> 
  /* for this maybe even time tag can be use */                         
           </div>
      </div>
      <button id="share"><img src="./images/icon-share.svg" alt="share-icon"></button>
  </div>
  

  #profile-info {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  

  #share {
      border: none;
      background-color: var(--light-Grayish-Blue);
      padding: 10px;
      /* position: absolute; */
      /* left: 270px; */
      /* top: 700px; */
      border-radius: 50px;
      /* margin-left: 3em; */
  }
  

  You can also use flex on the div i wrapped img and the text("thisOne") to align them but remove margin-left from profile-text for this.

  .thisOne{
      display: flex;
      align-items: center;
      gap: 1rem;
  }
  

  .profile-text {
      /* margin-left: 60px; */
  }
  

  All these changes broke your JS on my side tho. I tried to change it but doesn't work. I don't know if it is because i need to refresh the page(if i do that my changes will be removed so :D) i leave changing JS to you.

  You can put another button to the share-block and use it to close modal or probably there are ways to use only your button.

  1

  ---

  

  Tolulope David•170

  @tomxydPosted 10 days ago

  @KapteynUniverse Thank you so much for the time to provide such a detailed answer. I just saw the message and wanted to thank you first. I'll let you know the aftermath of applying this.

  1