built the blog preview using flexbox

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 1 month ago

  Hi Oluwasemilore Badejo, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

  I noticed that in resolutions your component is growing a lot, to solve this we can do the following:

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 320px;
      border-radius: 20px;
      background-color: hsl(0, 0%, 100%);
      box-shadow: 8px 8px;
      border: 1px solid hsl(0, 0%, 7%);
  }
  

  Instead of using "width" to specify an absolute width, use "max-width" to specify a maximum instead. By doing this, the content will behave much more amiably in smaller resolutions, making it easier to make the project responsive.

  The rest is amazing.

  I hope this is helpful. 👍

  0
• 

  Enodevs•30

  @EnodevsPosted about 1 month ago

  Great job @oluwasemilorebadejo, The colors complement each other very well, But I would advice to make it wider and less lofty so as to have more a more breathable space incase you want use it in a site of your own. Here are a few suggestions to make it better:

  1. You can add semantic elements to improve SEO
  2. Responsive Adjustments: You can add more breakpoints or modify existing styles to ensure everything looks good on various devices.
  3. Button for Actions: If you plan to add any interactions (like sharing or reading more), consider adding buttons with appropriate roles.
  4. Box Shadow: Adjust the shadow for the container on hover for a more pronounced effect. You might want to specify the color as well for consistency.

  I hope these suggestions are useful and you will make good use of them in the future

  0