Skip to content
OverviewSolutions
33
Comments
17

Roy

@arkaroy135600 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Roy•600
    @arkaroy135

    Hey Abdelrahman, you did a fine job. However, use

    body{
min-width: 100dvh;
min-height:100dvh;
}

    for solving the overflow issue. dvh or dvw units are better at handling the overflow issue. Check my code to solve your icon issue. PS, I also have that overflow issue which I didn't fixed yet.

    Marked as helpful
  • Roy•600
    @arkaroy135

    You did an excellent job, Zahirul. I have one tip for you, use transition effect when hovering on the image. I think that will make it more awesome.

  • Roy•600
    @arkaroy135

    Excellent work.

  • Roy•600
    @arkaroy135

    Hello Mario, Hope you are doing well. We did a good job here. However I have some suggestions for you. You did this.

    <div class="flex-box">
        <img
          src="/images/image-product-desktop.jpg"
          alt="product-image"
          class="image"
        />

        <img
          src="/images/image-product-mobile.jpg"
          alt="mobile=image"
          class="image-2"
        />

    I would like to suggest use

    <picture>
   <source media="(min-width: 1440px)" srcset="/images/image-product-desktop.jpg" aria-hidden = "true">
   <img src="/images/image-product-mobile.jpg" alt=" " aria-hidden="true">
</picture>

    This will make the desktop-image appear whenever screen size is 1440px or greater, else it will show the mobile-image.

    And also use this

    <del class="price-2">$169.99</del>

    del tag will make the cross through exactly in the middle of the price. Feel free to ask questions if you like. Happy coding.

  • Roy•600
    @arkaroy135

    Hello Davide, Hope you are doing well. You did a very good job in designing, but the advises are not generating when clicking the button.

    const promise = fetch(url).then((response) => response.json());

    the possible solution could be to use 'Let' instead of 'const' when declaring this variable.

    Let promise = fetch(url, { cache: "no-store" }).then((response)=>response.json());

    Use this instead. Everything else looks fine. Happy coding.

  • Roy•600
    @arkaroy135

    Hello Apo, Hope you are doing well. You did great so far in this project, however I have some tips regarding your question.

    1. Use this for responsivness,
    @media (max-width:1439px){
    .main-container{
         display: flex;
         flex-direction: column;
     }
    /* add your codes */
}
    1. Start your project with a mobile first approach. Build the mobile view first, then change it using media query for different screen-size. However, this approach varies people to people, but I think mobile first approach is more efficient to build any project.

    You can check my solution of this project as a reference. Feel free to ask questions. Happy coding.

View more comments