HTML And CSS Responsive Design ( Flex-box)

Community feedback

• 

  Anton•515

  @antaryaPosted over 3 years ago

  Hi Eslam,

  I want to suggest a couple of improvements to your implementation.

  These improvements are related to current issues:

  • card element is not centred horizontally
  • left section and right section are not the same compared to design
  • if you continue decreasing the width of the browser at some point left section height will be bigger than the right, so the image occupies only part of the box
  • While decreasing width, the list items 10K+|314|12M+ at some point are too close to each other

  HTML

  1. Wrap your content with the main tag. That way browser will know where to find primary content. Here is a resource with examples related to semantic tags https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/;

  CSS

  2. There is nothing wrong with applying border-radius to each corner, but there is a simpler solution. You can apply to the parent container and remove the rest of the border-radius related styles.

  .card {
    ...
    border-radius: 10px;
    overflow: hidden;
    ...
  }
  

  3. Using position: absolute; will complicate things. Use it only if there is no other way. In this case, all can be done without. If you follow the below steps, you can remove all position: absolute; except image overlay.

  4. From design, both sections look equal. This can be easily achieved by:

  .card .content {
    ...
    flex-basis: 50%;
    ...
  }
  .card .photo {
    ...
    flex-basis: 50%;
    ...
  }
  

  5. To make the card centre properly, remove all position: absolute; related styles. And add this:

  html, body {
    height: 100%;
  }
  main {
    display: flex;
    align-items: center; /* center vertically */
    max-width: 1200px; /* this will restrict width of main tag to 1200px */
    margin: 0 auto; /* center main tag horizontally as we restricted width */
    padding: 20px;
    min-height: 100%; /* this will make sure main will at least occupy viewport height */
  }
  

  6. To make the image occupy full height:

  .card .photo img {
    /* 
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      position: relative;
      top: 1.1px; 
    */
    display: block; /* this will remove space in the bottom of the image */
    width: 100%;
    height: 100%;
    object-fit: cover; /* this will stretch image to fit section */
  }
  

  Also, remove styles related to margin and width as it is not necessary anymore.

  I hope this will be helpful.

  Keep up the good work. Cheers!

  Browser Version: 92.0.4515.107 (Official Build) (64-bit) OS: Ubuntu 20.04

  Marked as helpful

  2

  ---

  

  Eslam_Mohamed•65

  @Eslam-mohamed7Posted over 3 years ago

  @antarya Thank you very much your feedback will help me a lot.

  0