Blog preview card with CSS and HTML

Community feedback

• 

  Marcos Valenzuela•100

  @MarcosAvgPosted about 1 month ago

  Hi, I have reviewed your code and I have seen some things that could be improved.

  First of all you don't have a font-family: declared, this is included in the assets and can be declared as a custom property in the following way:

  @font-face {
      font-family: "Figtree";
      src: url(assets/fonts/Figtree-VariableFont_wght.ttf) format("ttf"),
        url(assets/fonts/Figtree-Italic-VariableFont_wght.ttf) format("ttf");
    }
    --primary-font: "Figtree", sans-serif;
  

  It is also important to use a safe font such as sans-serif as an alternative. Your container displays fixed at low resolutions, which causes horizontal scrolling, I saw that it may be because the image is not defined with a max-width: and when having the viewport in a less resolution it does not scale, this could be done introducing the image in a container and giving it the property max-width: since the container if it can scale in resolution also your image:

  <div class="img">
        <img src="./assets/images/illustration-article.svg" alt="decorative image" class="decorative-image">
  </div>
  

  .decorative_image{
    max-width: 100%;
  }
  

  In the author, if you notice the image is not proportional to the design reference, as in the previous one, it can also be inside a container:

  <div class="avatar">
          <div class="avatar-image">
            <img
              src="./assets/images/image-avatar.webp"
              alt="Profile photo of Greg Hooper"
              class="avatar-photo"
            />
          </div>
          <p class="tag-text">Greg Hooper</p>
  </div>
  

  .avatar-photo {
    max-width: 100%;
  }
  

  You can add the flex growth and reduction factor to achieve a result in which the text occupies, for example, one third of the container and the image, one fourth:

  .avatar-image{
    flex: 1;	/*https://developer.mozilla.org/es/docs/Web/CSS/flex*/
  }
  
  .avatar-photo {
    max-width: 100%;
  }
  
  .tag-text {
  	font-size: 0.875rem;
  	font-weight: 800;
  	color: var(--color-gray-950);
  	flex: 3;
  }
  

  Marked as helpful

  0

  ---

  

  P

  Lilla•90

  @lillakmPosted about 1 month ago

  @MarcosAvg great points, thank you!!

  0