blog-preview-card-main

Community feedback

• 

  P

  yele.m•330

  @YelemyahMPosted about 2 months ago

  Hello coder ! Well done, your work is geat !

  I have a suggestion that might interest you.

  • Right now, you are using margin properties margin-left: 35% and margin-top: 15% to position the .carrecontainer, which is not optimal for responsive design. On smaller screens or different viewports, this can lead to misalignment or improper spacing.

  • Instead, you can use Flexbox to center the .carre container both horizontally and vertically, which will ensure better responsiveness and centering across all devices.

  /* Apply Flexbox to body for centering the main content */
  body {
      display: flex;
      justify-content: center; /* Centers horizontally */
      align-items: center; /* Centers vertically */
      height: 100vh; /* Ensures body takes full viewport height */
      margin: 0; /* Remove default margin */
      background-color: #F4D04E; /* Retain background color */
  }
  
  .carre {
      width: 100%;
      max-width: 400px; /* Set a max-width for better readability on large screens */
      background-color: #fff;
      padding: 20px;
      border-radius: 15px;
      border: 1px solid black;
      box-shadow: 10px 5px;
      margin: 20px; /* Adds some spacing around the container */
  }
  

  I hope it's can help. Have a great code !

  Marked as helpful

  0

  ---

  

  Emmanuel•40

  @pouigemaPosted about 2 months ago

  thanks for the advice if you have other advice I am open thank you @YelemyahM

  0