All comments

• 

  Kristina Radosavljevic• 380

  @KristinaRadosavljevic

  Submitted almost 2 years ago

  

  Responsive price grid component using Sass

  1

  10

  

  Ssembatya Dennis Duncan• 260

  @ssembatya-dennis

  Posted almost 2 years ago

  👾 @KristinaRadosavljevic I congratulate you upon completing this challenge

  Hmm I have noticed your solution is Figma perfect and it really scales well wiz various media screen sizes. Your CSS Grid Layout skills are just amazing and I just got inspired looking through your various solutions.

  ✌️ I really wish you a happy coding moment

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  joaovitorwitt• 250

  @joaovitorwitt

  Submitted almost 2 years ago

  I am open to suggestions and tips. All comments are helpful

  

  Stats preview card

  1

  80

  

  Ssembatya Dennis Duncan• 260

  @ssembatya-dennis

  Posted almost 2 years ago

  👾Hello @joaovitorwitt, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code: You’re on the right track I can see that you’ve used semantic tags well and the site is very responsive, the only thing you might have missed is the image mix-blend mode on the image in the image-wrapper div. I personally recommend going with background-blend-mode approach of blending the a linear-gradient() with your img to get it looking like the figma design rather than the filter style for this particular solution.

  /*filter approach*/
  .image-wrapper img { 
      filter: invert(10%) sepia(68%) saturate(4400%) hue-rotate(241deg) brightness(50%) contrast(89%);
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
  }
  

  /*mix-blend-mode approach*/
  .image-wrapper {
    flex: 1;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px
    background: linear-gradient(rgba(72, 15, 107, 0.6), rgba(170, 92, 219, 0.2)),
      url(./images/image-header-desktop.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Kinga• 150

  @K-Muzslay

  Submitted almost 2 years ago

  Hello, I made the picture swap using HTML <picture> element, but I found another solution using CSS media query. Which is the better solution?

  

  Product preview card component solution with flexbox

  1

  20

  

  Ssembatya Dennis Duncan• 260

  @ssembatya-dennis

  Posted almost 2 years ago

  I personally believe the picture tag is the best way to approach this issue because the picture tag not only helps you to swap which image to display at what media screen size but also assists the user to download only the right recommended image for his screen size which saves band width.

  The other way of doing it in CSS doesn't eliminate the fact that both images are still available in the DOM but just hiding one and displaying the other at different screen sizes hence wasting band width since the user has to download both the one is sees and the one that CSS is hiding.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Davut Piro• 30

  @davutpiro

  Submitted almost 2 years ago

  Hello everyone, this is my second project here. I look forward to all the advice, especially the ones to make my code cleaner. :) Thanks a lot.

  

  Mobile First - Stats Preview Card Component

  1

  20

  

  Ssembatya Dennis Duncan• 260

  @ssembatya-dennis

  Posted almost 2 years ago

  Hi Davut Piro, I congratulate you upon completing your second challenge on the platform however have noticed your solution doesn't render well on small mobile media screen.

  • Here are some tips I suggest that can make your code cleaner.

  1. You can try using the CSS background-blend-property in the <div class="img"></div> container to blend the image and your gradient smoothly.
  2. You can also minimize the use of unnecessary div's in your HTML by replacing them with <p></p>tags as they are the sematic tags responsible for holding small text and only use a div in areas where you want to position some content in a specific position or to improve on space around your content.

  <div class="numbers">
             <div class="companies"><span class="num">10k+</span> companies</div>
             <div class="templates"><span class="num">314</span> templates</div>
             <div class="queries">
               <span class="num num3">12m+</span> queries
             </div>
  

  Thanks you so much and wish you happy coding!

  Marked as helpful

  0
• 

  Kureon• 120

  @Kureon

  Submitted almost 2 years ago

  • Learned about picture and srcset attributes.
  • For the button hover state I wasn't able to use the sass darken function in combination with a variable color. Is there a way to do that or is there an other best practice for?
  • For the mobile media query I had to alter all the font sizes. Is there a beter/smarter way to do that?

  

  Responsive Product Card using picture+srcset

  1

  70

  

  Ssembatya Dennis Duncan• 260

  @ssembatya-dennis

  Posted almost 2 years ago

  For the case of font sizes from the desktop view to mobile media screen sizes, I personally recommend setting a root font size and using relatives units like rems for fonts such that for small media screens you just reduce the root font size and all fonts sizes for various elements shrink proportionally. //e.g setting for the desktop version html { font-size: 62.5%; }

  Marked as helpful

  0