Skip to content
OverviewSolutions
12
Comments
19

Warren

@warrenleeHong Kong630 points

Not your typical web developer

I’m currently learning...

A bit of everything, React, React-Native, Vue 3, TS

Latest solutions

View more solutions

Latest comments

  • Warren•630
    @warrenlee

    Hi Ronny, the site looks good!

    I think the paging solution you have is a good choice and it's good that you thought about performance issues.

    Here is my take on the challenge. https://www.frontendmentor.io/solutions/rest-countries-explorer-using-vite-vue-3-tailwind-i0YQKw52GN

    I used an infinite load solution. Feel free to ask questions and check it out!

    Marked as helpful
  • Warren•630
    @warrenlee

    Hi Flor, good job on this challenge! Desktop looks perfect but here's a tip on how to start getting the layout respond for mobile.

    Starting with #conteiner change width to 100% and height to auto and add flex-direction: column. On your #img change the width to 100% and since you are using background-image you'll need to set the correct background-image url, add either padding-top to give the element some height or you can use the newly introduced aspect-ratio. Spotted a minor mistake, background-repeat should be set to no-repeat rather than none

    Next, you'll need to sort out the border-radius. I'd recommend to apply it on the #conteiner and adding overflow: hidden to make the rounded corners visible. I would also recommend using the picture tag instead of background-image as you can use media queries to set the image you want to show.

    example:

    <picture>
    <source srcset="/desktop-img.jpg" media="(min-width: 768px;)">
    <img src="/mobile-img.jpg">
</picture>

    I hope this helps!

    Marked as helpful
  • Warren•630
    @warrenlee

    Hey chigboo, in regards to your issue you can try using the CSS property transform it has a behaviour where you can rotate elements.

    On hover try applying the following onto the SVG icon.

    transform: rotate(180deg);

    And the icon should flip 180. Hope that helps.

    Marked as helpful
  • Warren•630
    @warrenlee

    Hey Alexandru, good work on the challenge, I think how you tackle the image using background-image with grid works well quite! But as you've pointed out the image for mobile zooms and that's because of the CSS property background-size: cover and the also the way grid cells behave where all cells have the same dimensions according to the large cell.

    If you want to look back into the picture solution again have a look at my take on this. https://bitbucket.org/warrenlee/frontend-mentor/src/7d9890d17383b78420d658897ccfe816ee62f71a/product-preview-card-component/index.html#lines-14:17 Just make sure you use media="min-width: XXpx" rather than max-width in the source tag and make the source cascade so that large min-width starts from the top.

    Hope that helps!

    Marked as helpful
  • Warren•630
    @warrenlee

    Hey Mateus, good on job on tackling the challenge. I also had a go at least and I agree, coding the layout is easy as there is a lot of tweaking with the positions in order to get them in the right places. With the box-shadow, I think you've nailed it there and I would recommend spreading them out evenly, like have spread out in multiples of 30 and add a transition property to give it that smooth spread when appearing.

    box-shadow: 
    rgba(255, 255, 255, 0.09) 0px 0px 0px 30px, 
    rgba(255, 255, 255, 0.06) 0px 0px 0px 60px, 
    rgba(255, 255, 255, 0.03) 0px 0px 0px 90px;
transition: box-shadow 500ms ease;

    Hope that helps!

    Marked as helpful
  • Warren•630
    @warrenlee

    Hey James, good work! I am currently on a 27" screen and the layout for both homepage and slideshow looks very spaced out so you might want to add a container/max-width to prevent this from happening, and the snap of the slideshow doesn't seem to flow very smoothly, especially at the end where it snaps a little awkwardly, but that's just my preference. Other than those, seems to work flawlessly! Good job on that

    Marked as helpful
View more comments