Responsive landing page with CSS flexbox and JS

Community feedback

• 

  Chenxi•210

  @Chenxi96Posted 10 months ago

  Hi Filip,

  This looks good, I suggest that you use position: absolute for div#bubble-div and div#bubble-triangle. This way you remove these div’s out of the regular flow of the web page. This will remove the small jump. Let me know if this helps!

  0

  ---

  

  Filip Szkarłat•180

  @FilipSzkarlatPosted 10 months ago

  @Chenxi96 Hi thanks for the comment.

  I tried position: absolute first, but it only worked for one screen width, e.g. 1440, but when changing the width, the div was also moved, so out of the two I chose position: relative with a slight jump.

  0

  

  Chenxi•210

  @Chenxi96Posted 10 months ago

  Hi @FilipSzkarlat,

  I see what you mean, so on mobile screen size you have div#profile margin-top: 30px change that to padding-top: 30px and have the height: 70px so that the height matches with div#profile-share. Since you use margin-top it changes the space between elements that is why you are seeing that jump in mobile screen size. This should eliminate your issue.

  Marked as helpful

  0

  

  Filip Szkarłat•180

  @FilipSzkarlatPosted 10 months ago

  Hi @Chenxi96,

  Actually, I was talking about the problem of jumping in the desktop view, but thanks for the advice on jumping in the mobile view, I used it and it works. Moreover, I came up with another idea to eliminate the jump in the desktop view and placed an invisible div with the same height as the pop-up bubble when clicked. So the height is preserved and there is no more jump.

  Thanks for the help.

  Cheers

  1