Article Preview / JS, flexbox

Community feedback

• 

  Mijail Hernandez•950

  @MishaHernandezPosted almost 4 years ago

  Hi Sirriah!

  • the .article-footer container is smaller than its child "menu-share", this is due to the margin allocated in .article-content and this finally forces you to manually calculate the size of "menu-share" in px (width: 327px; and height: 64px;) to cover the remaining space.

  • So I would recommend removing the margin from .article-content and placing in each of its children a padding that keeps the same values and can occupy more space, for example: .article-footer would have padding: 0 40px 31px 40px; and this would make it easier to assign a 100% width and height to the "menu-share".

  I hope it was understood 😅 Greetings and continue with the challenges 😃👋

  1

  ---

  

  Tereza•605

  @sirriahPosted almost 4 years ago

  @MishaHernandez Hi, it takes me some time, but I hope I got it :D. I didn't think about responsiveness for smaller screen than 375px. I wanted to make it nicer for screen between 375px - 1440px. I add new breakpoint and I dynamically calculate the "left" poperty. And if you look at mobile version on images in design folder, the height of whole article in "active state" is smaller (in figma I see 504px) than in "inactive state" (in figma 512px) - this is little bit strange. I kept the height same on both versions. :)

  1

  

  Mijail Hernandez•950

  @MishaHernandezPosted almost 4 years ago

  @sirriah You're right, I just checked it, I did this challenge a long time ago and I didn't see the difference 😅, however I would not strictly follow the design because it also seems strange to me. You have done a good job with the final design anyway. Keep it up! 👍

  1