Article preview component using Sass and Javascript

Community feedback

• 

  Akash Verma•810

  @akash-1712Posted over 3 years ago

  I have a suggestion instead apply margin to main.container you use: 1)body{ height:100vh,display:flex,align-items:center,justify-content:center} it automatically place the main-container in center of screen. 2)For Mobile layout just give height:initial in body and add margin-top:10px in main-container. it make your design more responsive.

  Marked as helpful

  1

  ---

  

  Cokorda Agung Yudhana•120

  @ckrdiPosted over 3 years ago

  Hello there @akash-1712, thank you for your suggestion.

  I will try out your suggestion and see if it works, thank you.

  0
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @ckrdi! When you use position:fixed, your element is positioned relative to the viewport - so it's a good option if you want something always in one corner, or always at the top/bottom of the screen. It's not really what you should be going for here.

  If you move your popup div inside your <article> element, you can position it absolutely in relation to that article - but don't forget to set position:relative on the article.

  Other than that, make sure that the social media icons in the popup are actually links (because that's what they would be in a real life situation).

  Marked as helpful

  1

  ---

  

  Cokorda Agung Yudhana•120

  @ckrdiPosted over 3 years ago

  Hello there @AgataLiberska. Thank you so much for the feedback.

  Now I understand that we could position an absolute child element relative to its parent element as long as the parent have relative position.

  Before this I thought that once an element has absolute position, we could only position it relative to the viewport just like fixed position. I admit that I was confused about this concept.

  And I will make sure the popup links are actual links. Thank you.

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @ckrdi glad i could help!

  0
• 

  FocusCookie•350

  @FocusCookiePosted over 3 years ago

  You could also read out the width and height of the window in js with

  let windowWidth;
  let windowHeight;
  window.addEventListener("resize", function () {
    windowWidth = window.innerWidth;
  windowHeight = window.innerHeight;
  });
  

  With knowing the dimensions you can calculate the position of the initial share button and add some space to it.

  1

  ---

  

  Cokorda Agung Yudhana•120

  @ckrdiPosted over 3 years ago

  Hello there @FocusCookie, thank you for your suggestion.

  It seems that my code was wrong in the first place and I have to correct it using position: absolute in the popup and position: relative in the parent element, but thank you for the suggestion.

  0