Article Preview Component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  -The component has not been centered properly. You don't need to use margin.

  • You already using Flexbox for layout in a right way, but you forget to add min-height: 100vh instead of plain height: 100% which doesn't work properly

  Example:

  body {
    min-height: 100vh;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  #container {
    margin-top: 10%;
  }
  

  Additionally you don't need to use padding for attribution to place it in bottom. Instead you can use absolute positioning.

  • Example:

  body {
    position: relative;
  }
  #mylink {
    position: absolute;
    bottom: 1rem;
  }
  

  ---

  • Now your layout issues has been fixed, and don't forget to remove the padding-top: 10vh from #mylink

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Hira•130

  @hirashabeerPosted 7 months ago

  hey @0xabdulkhalid ! just wanted to say thankyou so much and ask one more thing why i had to write !important in svg class style it was being overridden and not toggling the classes and how were you able to read my code and point out mistakes so quicklyyy

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  I'm glad to hear that my feedback was helpful to you @hirashabeer.

  Actually the first you need to do is to add the image directory inside your Github repository in order to display the images.

  Currently no images are being displayed because you still not added the image directory, So make sure to do it first!

  You can easily upload the entire image directory including all images by simply dragging and dropping into the upload field in your repository.

  1

  

  Hira•130

  @hirashabeerPosted 7 months ago

  now @0xabdulkhalid ?

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  You asked a question right @hirashabeer ?

  " why i had to write !important in svg class style it was being overridden and not toggling the classes ", It simply because of the usage of id selector for styling the menu.

  You have used body #popup.active, Actually you don't need to use this much of selectors to do a thing. You just overwritten things here so that you need to override the display: none for .svg rule using !important flag.

  Don't worry you simply fix this by changing the selectors and a little bit of js.

  You want to add this refactored css,

  .popup {
    height: 100px;
    width: 200px;
    clip-path: polygon(0 24%, 100% 23%, 100% 73%, 61% 76%, 50% 100%, 38% 75%, 0 73%);
    background-color: var(--dark-gblue);
    display: none;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    top: 42%;
    right: 18%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  }
  
  .popup-active {
    display: flex;
  }
  

  Now remove the id from div and add class of "popup"

  Then for Javascript you need to toggle popup-active instead of svg.

  This is how we need to maintain readability of our code.

  Hope this suggestion helpful to you!

  0

  

  Hira•130

  @hirashabeerPosted 7 months ago

  @0xabdulkhalid images are still not appearing i have added the images folder in git hub ... and due to making the changes you last told of popup classes the toggling is not working as expectation this is becoming worst...i am gonna die

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  @hirashabeer don't be worried, If you need to fix this so badly i need to contribute on your repository.

  Can i contribute? I need your will. Once you say to proceed i will clone you repository and make changes then commit and create a new pull request to yours so that you can easily merge my commits within your repository.

  If it done then you don't need to be worried about this issues.

  0

  

  Hira•130

  @hirashabeerPosted 7 months ago

  @0xabdulkhalid yes please proceed

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  It's sounds good @hirashabeer, Now assign this issue on your repository to me.

  I can only start working on it after assigning me.

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hey @hirashabeer, it's time to merge this Pull Request.

  Marked as helpful

  1

  

  Hira•130

  @hirashabeerPosted 7 months ago

  thank u so much @0xabdulkhalid i loved the new concepts you taught me BTW ,I just came across your amazing work on Frontend Mentor and I have to say, I'm truly impressed! Your attention to detail and the way you've tackled the challenges is really inspiring.

  I'm really eager to learn and improve my coding skills, and seeing your work has motivated me even more. I was wondering if you could plzzzzzz share some insights into your process and the resources you've used to hone your coding skills. Your expertise shines through your projects, and I believe there's a lot I could learn from your experiences.

  I completely understand if you prefer to keep some of your techniques and resources close to the chest, but I'm genuinely eager to learn and any guidance or pointers you could provide would be immensely valuable to me.

  Looking forward to hearing from you and hopefully learning from your expertise!

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  I'm glad to share my knowledge with you @hirashabeer !

  Please don't say "close to the chest", I never been like that. If i act in that way then i could never be in my current position.

  Really what makes me to grow is just being open, that's it. We want to seek knowledge by sharing and growing with them.

  I suggest you to be open minded, that's what gonna make you a best living being. You can start by setting your Github profile as Public one. Trust me this decision gonna make huge difference after a point of time. Because people can look at your growth live by just viewing your Github history, It greatly helps you to unlock new opportunities.

  You can ask me any stuff related to web development, If i doesn't have knowledge regarding your doubt then we'll both can learn and grow.

  Stay connected!

  0

  

  Hira•130

  @hirashabeerPosted 7 months ago

  i think you @0xabdulkhalid did't got me or i was unable to convey my message to you ,i requested for the resources you used for learning coding and then writing and practicing code ,actually this is my passion or something like that ,that i love to experience an see new things related to my work . bcz i don't have success to any person or informtion in this field ...you didn't gave me that btw i would try to follow your suggestion ,

  Best wishes!

  0