four-card-feature-section-master

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Dvbenthem! congrats on finishing the challenge, you did a great job with the layout and your site seems to have good responsiveness

  I will try to answer your questions as far as I can.

  • This is some behaviour that I don't know why it happens, it happened to me in the past and did a research but couldn't get the exact problem, some people usually say is some default styles fault from the browser even after resetting them, you can fix it tho, using min-height: 100vh instead.

  • You have various options, from creating pseudoelements (hardest one in my opinion) to just wrap your <div> with curling edges with other <div> where you use your border, something like this:

  <div class="border" style="box-shadow: 0 -5px 0 0 red;"> <--- this boxshadow will give a border-top
     <div class="card-item supervisor">
         <h2 class="title">Supervisor</h2>
        <p class="text">Monitors activity to identify project roadblocks</p>
        <img src="images/icon-supervisor.svg" alt="">
     </div>
  </div>
  

  With this your border will have no corners since is the border from the parent div, and not the one with the border-radius property!

  Hope my feedback helps you!, if you have any questions, don't hesitate to ask! good job

  Marked as helpful

  1

  ---

  

  dvbenthem•110

  @dvbenthemPosted about 2 years ago

  Hello @DavidMorgade,

  Thank you for your reply. Just tried the min-height: 100vh and indeed it worked. I had been looking for a while where the problem was but could not find it. Eventually with the dev-tool i unchecked some properties.

  Oke i will try you solution for the curling edges.

  The feedback helped me a lot, Thanks again! i will do.

  Danny

  0
• 

  Snehamoy Bag•600

  @snehamoybagPosted about 2 years ago

  Hi @dvbenthem, Congratulations on completing the challenge! Good Job! 👏

  Answering to your query

  Setting a fixed height can be problematic.

  In small screen devices the content's height increases as the content's width shrinks, so if you have a element with set height the content inside of it overflows out of it.

  In your case as you have set a height on body, the extra content overflows out of the body and everything overflowing out of the body gets cropped. 😅

  To fix the issue

  Try to stick with min-height when setting a height on a element. Setting a min-height will give the element the minimum desired height and it'll strech if the content inside of it increases, so it won't cause any overflow.

  In short always use min-height unless you have a solid reason not to. 👍

  Marked as helpful

  1

  ---

  

  dvbenthem•110

  @dvbenthemPosted about 2 years ago

  Hello @snehamoybag,

  Thanks for you feedback on my challenge. I tried to change it to min-height: 100vh and it worked perfectly.

  Thanks for your explanation on why it is doing it so.

  Thanks again for your feedback.

  Danny

  1