Skip to content
OverviewSolutions
12
Comments
9
Zglob
@ZglobiulViu

All comments

  • Zglob•250
    @ZglobiulViuPosted over 1 year ago

    You should use box-shadow instead of border for the items hover state. When you set that border of 3px your page will grow in dimension when you hover over a specific item. Also I wouldn't use innerHtml to read numeric values from the html elements instead i would use variables to set for example an incrementor like this: let numOfProducts=0; then create a function to either increment or decrement based on the clicked sign and then display numOfProducts on the page or just let that in two separate functions like you did there.Also instead of using parseFloat() method use Number("num") to convert from string to num or shorter put a + sign in front of the string representation of a number like this : +exOfstringNumber;

    Marked as helpful
    0
  • Zglob•250
    @ZglobiulViuPosted over 2 years ago

    in your body you don't need to set a specific width of 100% or height of 100%, instead use just your min height of 100vh, also you do not need to set the flex-direction to column.There would be more things to say, you abuse too much the position absolute and relative for unnecessary things.

    0
  • Zglob•250
    @ZglobiulViuPosted over 2 years ago

    I would get rid of display flex from your .card because it doesn't do anything there, also put the .attribution inside of a <footer> tag and place it outside the .container.

    0
  • Zglob•250
    @ZglobiulViuPosted almost 3 years ago

    You can check for my solution if you want. I made it with 106 lines of css. Also I saw in your code that you used !important. Try to not abuse on it and if you can don't use it at all. Learn more about specificity.

    Marked as helpful
    0
  • antonio_p•40
    @purplejragonSubmitted almost 3 years ago

    How can I make my code neater? All of the divs and container items with different class makes it difficult to read.

    HTML, CSS, and Flexbox

    2
    Zglob•250
    @ZglobiulViuPosted almost 3 years ago

    Try to use BEM naming convention.

    0
  • Zglob•250
    @ZglobiulViuPosted almost 3 years ago

    your media query doesn't apply because you miss typed and you wrote max_width instead of max-width.

    Marked as helpful
    0
  • Fai•140
    @FsaneaSubmitted almost 3 years ago

    This is the most difficult challenge so far. I have issue I do not know how to fix it when the page size width 320px the layout looks fine but when I resize it as an example to 500 px the feedback section does not come to center anymore. And how to align the container in the center.

    CSS grid, Flexbox.

    1
    Zglob•250
    @ZglobiulViuPosted almost 3 years ago

    In your feedback(not media query, my bad) you set align-self:flex-end. Delete that. Also justify-self property doesn't work on a flex container, only grid .

    Marked as helpful
    1
  • Zglob•250
    @ZglobiulViuPosted almost 3 years ago

    You should try to wrap your main image and the eye logo in a div , which I saw in your code that you did already. Now go on and try to set a background-image:url() on that div with the same main image(url is a bit tricky when you set the path, search on yt). That url image should copy the size of your main image and should be below it. Also you would need to set z-index on the logo. z-index=-1 should work I guess. Now on hover effect set your main image to become transparent. Also to set that blue color to the url you should use a linear-gradient. I practice CSS for 2 months now, so i'm not a pro. I hope I could help you.

    Marked as helpful
    1
  • Zglob•250
    @ZglobiulViuPosted almost 3 years ago

    GOD DAMN... THOSE ALT's

    0