3-column-preview-card-component

Community feedback

• 

  Ed-dyb Abdelilah•1,560

  @eddybproPosted over 1 year ago

  Hi, moritzrose

  Congratulation on finishing this challenge, I hope it was fun.

  For the code, You did a nice job but still need some improvements mostly in CSS:

  • CSS code:

  @media only screen and (max-width: 375px){
     .container {
          /*remove ''margin-left'' and ''margin right'' properties*/
  }
  .container div{
      /*change the "padding" values to (25px=1.56rem)*/
      /*add "padding-bottom" property*/
       padding-bottom:1.56rem;
       /*remove the "height" and "position" properties*/
  }
    button{
      /*remove the "position" property*/
  }
  }
  
  @media only screen and (min-width: 376px) and (max-width: 1440px){
      .container {
          /* remove the "height" property */
          /* remove this : align-content: center; */
          /*add this */
          justify-content: center;
      }
     .container div{
     /*update this*/
     padding:1.56rem;
  }
    button{
     /*remove "position" property*/
  }
  }
  

  Tips

  • Remember in most cases you don't have to use the height property in containers like div or main ..., instead you can use min-height, Which makes your site displays well in small screen sizes.

  • Use relative units rem em instead of absolute units px.

  • Make use of HTML semantic tags: header, main, footer.

  • I recommend you start using classes and, or pseudo-elements: example:

  • • In the button you can use a class like that: <button class="btn"><button>
  • • Here is how to use pseudo-element:

  .container > div{}
  

  Using classes and pseudo-elements makes your styles display faster.

  That's it HAPPY CODING

  1

  ---

  

  Moritz Rose•90

  @moritzrosePosted over 1 year ago

  Awesome feedback!! @eddybpro

  0

  

  Moritz Rose•90

  @moritzrosePosted over 1 year ago

  The position: absolute for the button was to have it displayed at the bottom of the container. I experimented and the only way for me to get it there was to use position absolut. How else? Cause now it just sits right under the p element. Removing the height, makes the container just as high as it needs to be to fit in all the elements, but I want it stretched out a bit more. How would you do that? And when I say stretched out, I mean certain distances/gaps where I want them to be, not just stretched out in general. The rest of the feedback is absolutely fantastic :) I changed everything. @eddybpro

  0

  

  Ed-dyb Abdelilah•1,560

  @eddybproPosted over 1 year ago

  Hello, @moritzrose

  Happy to hear that from you.

  For the question,Sorry I did not answer earlier, If I get it right you can use the margin property like that:

  button{
       margin-top: your value;
       margin-right: your value;
       margin-bottom: your value;
       margin-left: your value;
      /*here a shorthand */
      margin:  your values;
  }
  

  GOOD LUCK

  0
• 

  KenKen•130

  @kientq111Posted over 1 year ago

  I cannot see any styling in your site, pls check it. Using <link rel="stylesheet" href="./style.css"> instead of <link rel="stylesheet" href="style.css">

  0

  ---

  

  Moritz Rose•90

  @moritzrosePosted over 1 year ago

  @kientq111 how about now?

  0

  

  jacek83000•60

  @jacek83000Posted over 1 year ago

  @moritzrose I also can't see styling on your site, but only with the exact width of 375px and with any width > 1440px. I also see in your css, that you created mobile design for width < 375px and desktop design for width between 376px and 1440px. Better approach would be to create mobile design also for width higher than 375px (ending at around 1000px for example).

  To fix this problem for now:

  @media only screen and (min-width: 1200px){
  	...
  }
  @media only screen and (max-width: 1200px){
  	...
  }
  

  In Chrome dev tools you can check how your page looks on many devices, if you don't know this already: https://developer.chrome.com/docs/devtools/device-mode/#viewport

  0

  

  Moritz Rose•90

  @moritzrosePosted over 1 year ago

  I did not know the website! Thank you! Also, I don't really understand the different widths on different devices yet. If I just type <1200 or >1200, doesn't include multiple devices that need different types? Since most of the beginner problems on fronendmentor suggest 375px device and 1440px device, I just chose those. For me, I only see tons of different devices with many different widths...its confusing :D @jacek83000

  0

  

  jacek83000•60

  @jacek83000Posted over 1 year ago

  @moritzrose

  You have to make a website where at width of 375px it will look like a mobile design in assets and at 1440px it will look like desktop design. It doesn't tell you what your page needs to look like at e.g. 1000px, however these challanges are also about responsive web design, so it would be nice if nothing unexpected would happen in between 375px and 1440px.

  Anyway, congratulation on completing this challenge!

  0