Skip to content
OverviewSolutions
16
Comments
5
Ssembatya Dennis Duncan
@ssembatya-dennis

All comments

  • Ssembatya Dennis Duncan•260
    @ssembatya-dennisPosted about 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
  • Ssembatya Dennis Duncan•260
    @ssembatya-dennisPosted about 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
  • Ssembatya Dennis Duncan•260
    @ssembatya-dennisPosted about 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
  • Ssembatya Dennis Duncan•260
    @ssembatya-dennisPosted about 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
    @KureonSubmitted about 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
    Ssembatya Dennis Duncan•260
    @ssembatya-dennisPosted about 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