Overlay and em

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Do not forget ⚠️ to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.

  • To get the image to look like the FEM example, you are going to want to use the mix-blend-mode along with the multiply value and include a opacity with the value of 0.8.

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
  

  • The statistics at the bottom are a list ⚠️, so it should be built using an unordered List element.

  More Info:📚

  MDN <ul>: The Unordered List element

  • For improved accessibility 📈 for your content, it is best practice to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  • Remove this properties from the body and html. Never give them width/ max-width`. They should always be at 100% (which is already set by default)

  
  html {
          max-width: 1440px;
      }
  
      body {
          max-width: 1110px;
      }
  

  • There should not be any styling properties on the html.

  html {
      background-color: var(--main-background);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      max-width: 375px;
      min-height: 100vh;
  }
  

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1

  ---

  

  Sté[PH]ane•160

  @Fanou59Posted almost 2 years ago

  @vcarames

  Thank you. I have a lot of question :( I’ll check it tomorrow morning (France) and I’ll come back to you :)

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Fanou59

  Sounds good!

  Marked as helpful

  0

  

  Sté[PH]ane•160

  @Fanou59Posted almost 2 years ago

  @vcarames

  Hello !

  I've corrected a lot of things but i'm not satisfied of the result :( I've always some problems :

  • If the width > 1110 px it's not good for the result with the picture
  • I've a black line between the picture and the main
  • I've always an HTML error in my <picture> because of the <p class="purple"> but i don't know how doing this without that :(

  What do you thing of my job ? And, can you please help me for the end ?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Fanou59

  "I've always some problems" - welcome to web development.

  • Apply the following to the img this will also apply the image color;

  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
  

  • Add this to your `CSS Reset’;

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  

  • Delete the <p class="purple"></p> not needed.

  • Delete all of this, since it is no longer needed;

  picture {
      position: relative;
      width: 50%;
  
  }
  
  img {
      border-radius: 8px 8px 0 0;
      width: 100%;
  }
  
  .purple {
      background-color: #AB5CDB;
      border-radius: 8px 8px 0 0;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      mix-blend-mode: multiply;
      opacity: 0.8;
  }
  

  Marked as helpful

  0

  

  Sté[PH]ane•160

  @Fanou59Posted almost 2 years ago

  @vcarames Thank you :)

  hum....

  I lost the purple effect on my picture :(

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Fanou59

  (Sorry I forgot to add it the previous comment)

  Add this to your code, this will give the picture element the correct color and work along with the img properties that were added earlier.

  picture {
      background: var (--accent);
  }
  

  Other than that, your component looks awesome!

  Marked as helpful

  0

  

  Sté[PH]ane•160

  @Fanou59Posted almost 2 years ago

  @vcarames

  Thanks a lot :)

  it works well ! I'm going to start a new challenge now !

  Thank you for your advices and your help

  0