Raw CSS & HTML

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop seems great but like what you said, the responsiveness and mobile state right now are missing.

  Carlos already gave great tip on this one, just going to add some couple of little suggestions:

  • It would be great to have a base styling with these properties

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

  • In general, you should avoid using height: 100vh on a site and use min-height: 100vh instead, but on the current situation, either one is not working well. Try to inspect the layout in dev tools at the bottom, you will notice that the layout has shrink right, that is because of the height: 100vh.
  • Also don't add width: 100vw as this adds an extra horizontal scroll since this doesn't account the scrollbar's size. You can use width: 100% instead.
  • Your .left-content-bottom-container could have used ul since those are "list" of information about the company website.

  Right now, I find it hard to suggest some css but I do hope that you may be able to implement this again but responsively.

  Again, awesome job on this one.

  Marked as helpful

  1
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  Hey Edllt,

  • So a way to make this project responsive is by using media queries. You can use

  @media (max-width: 900px) { 
  /////////code
   }
  

  • For the image, you can use background-blend-mode to set the color to the image. This is an example from my code:

  .image {
      min-height: 250px;
      border-radius: 0.75em 0.75em 0 0;
      background-image: url(../images/image-header-desktop.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-blend-mode: soft-light;
      background-color: rgb(112, 51, 142);
  }
  

  Marked as helpful

  1