Skip to content
OverviewSolutions
8
Comments
4
Mary2021
@Mary2021

All comments

  • Mary2021•190
    @Mary2021

    Always include width and height size attributes on your images and video elements.

    https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=devtools#images_without_dimensions

    Otherwise layout looks fine on different screen sizes.

  • Mary2021•190
    @Mary2021

    Nice work Adam! Your solution is as close to the design as it could be.

    You could add a better looking layout for screen width 1119px and less (tablet) by adding max-width to article element with class name card and align it to the centre.

    I used Vuetify v-card for this solution.

  • Mary2021•190
    @Mary2021
    What are you most proud of, and what would you do differently next time?

    I tried styling with Sass. On this project used only Sass variables, next time would like to try also nesting and mixing.

    Card images for mobile and desktop view are added with CSS:

    .card-image { 
    content:url('images/image-product-mobile.jpg');
}

    I used mobile first approach. This way mobile view responsiveness was easily achieved with flex-direction default styling.

    .card {
  display: flex;
  flex-direction: column;
}
    What challenges did you encounter, and how did you overcome them?

    Most challenging for me was to make responsive the larger views, because the width varies in very wide scale. I tried to adjust card text area padding and text size with media queries but I´m not quite pleased with the final result.

    What specific areas of your project would you like help with?

    There are so many different devices with different screen resolutions that people use? How to make the responsive component styling simpler? What tricks and tools to you use? I use Chrome DevTools to test the views.

    Responsive product preview card with Sass

    #sass/scss
    2
    Mary2021•190
    @Mary2021

    I removed CSS content:url property and added html picture element to the solution.

    HTML picture

  • Eugene Amedior•140
    @Eugene-ak
    What are you most proud of, and what would you do differently next time?

    I am proud I finally completed this challenge completing this challenge. It had me for days.

    What challenges did you encounter, and how did you overcome them?

    I found it difficult to display either the desktop image or mobile image based on the viewport width. I initially used state and the useEffect hook in next js but it didn't entirely solve the problem. I also tried the css ::after pseudoclass and that also brought about new issues. I later found out about the html picture element which was just suitable to solve this.

    What specific areas of your project would you like help with?

    I will learn more about how the html picture element is used and best practices.

    Product Preview Card Component

    #next#react#sass/scss#typescript
    1
    Mary2021•190
    @Mary2021

    Nicely accompliced solution, Eugene! I like the clean and simple structure of your Sass code.

    Found couple of good sites explaining html picture element:

    I find especially handy, that its possible to add different images for instance tablet(landscape/1200px) and desktop(portrait/1200px).

    <picture>
  <source media="(orientation: landscape)" ... />
  <source media="(orientation: landscape) and (min-width: 1200px)" ... />
</picture>

    I fond a little bug in your solution. In mobile view content is longer than class main (home.module.scss) height. It resolved when removing the height property.

    .main {
    height: 100vh;
    ...
}
    Marked as helpful