Skip to content
OverviewSolutions
28
Comments
31

Eduardo

@KTrick01Paraguay910 points

I'm someone in search of his first job that likes to write code and design stuff

I’m currently learning...

Vue.js 3

Latest solutions

View more solutions

Latest comments

  • Eduardo•910
    @KTrick01

    Hi! Here is a little tip for you, your image on the mobile view seems a little deformed, this is due to his aspect ratio being modified, to fix that you can use the object-fit: cover; property in your .product-image class, hope that it helps!

    Marked as helpful
  • Eduardo•910
    @KTrick01

    Hi! Your solution looks great! But here is a little tip for you, if you pay attention there is a little gap between the bottom of the overlay and the image (at least using FireFox), to fix that you need to put a display: block; to your image element, hope that it helps!

    Marked as helpful
  • Eduardo•910
    @KTrick01

    Hi! After tinkering around I found that the elements causing overflow are this ones:

    • Nav element (Because it has 100vw width)
    • div with class content2 (Because it has a width in vw too, i dont recommend you that)

    If in the future you have this same problem, a little trick to identify the elements causing overflow is to give all elements a border Something like this: * {border: 1px solid black}, this way you will be able to see wich container is overflowing

    Marked as helpful
  • Eduardo•910
    @KTrick01

    Hi! I personally use media queries just when its completely necessary, for components like this where the only thing that changes is the size of things and not the distribution I always use just clamp on the elements that need to change, clamp is not nearly as complicated as it seems, so give it an opportunity!

    Marked as helpful
  • Mark•170
    @Mark-a-obrien

    flexbox

    1
    Eduardo•910
    @KTrick01

    Hi! An easy fix for your problem is that instead of changing your #view opacity to .5 on hover, change it to opacity 1 and just lower the opacity of the background-color to .5, like this:

    #view:hover {
  opacity: 1;
  background-color: hsl(178, 100%, 50%, .5);
}

    This way the eye will be fully visible because you only will change the background color opacity, but not of the entire container! Hope that it helps!

    PD: If you put border-radius: inherit; to your #view, it will have the same border radius that the image

    Marked as helpful
  • Eduardo•910
    @KTrick01

    Hi! Congratulations for your first challenge! After taking a look at your code it seems that you didn't import properly the fonts that you need, that's why your solution doesn't match the design, to fix it you only need to paste this line in the head of your main CSS:

    
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');

    Hope that it helps!

    Marked as helpful
View more comments