Skip to content
OverviewSolutions
47
Comments
3
Mark Angel Papio
@ExiviuZ

All comments

  • Cornflakes•290
    @CornflakesPlusSubmitted over 2 years ago

    Hey There! Criticism is needed (Jumping straight into questions.)

    1. I was surprised to learn that <img> tags can't have a background color by simply adding a background property. It took me a while to research how to change the color of the main image and I still could not bring it to perfection.

    2. My main focus for this project was to get familiar with "ancient" techniques. So I used "Floats" instead of "Flexbox" or "Grid". I'm a little hesitant about jumping into "Flexbox" or "Grid" because I feel like I'm not good enough with using "Floats". Should it be like that?

    3. Another thing that almost made me mental was trying to stretch my image to cover the remaining margin and make it responsive. I made a lot of mess with the "Height" properties, I found it difficult to use the "Height" property more than the "Width" property.

    A cleaner and more efficient method would be greatly appreciated. Best practice and ANY Advice/Feedback/Criticism will also be extremely helpful and appreciated.

    Responsive Card Component Using Ancient Technique... Floats, and Media

    2
    Mark Angel Papio•810
    @ExiviuZPosted over 2 years ago

    The photo somehow get squeezed when the website is getting smaller and smaller around breakpoint 900, you can use the img property, object-fit: cover; so the image gets proportionate according to its parent or container.

    Marked as helpful
    1
  • Mark Angel Papio•810
    @ExiviuZPosted over 2 years ago

    You could lighten the box shadow a little bit so it's not very dark it goes with the light theme of the page.

    Marked as helpful
    0
  • BiscuitCandy•100
    @BiscuitCandySubmitted over 2 years ago

    I would like to know about center-middle item alignment. I have always used flex for this project for those alignments. Are there any other ways to achieve it?

    NFT-preview-card

    2
    Mark Angel Papio•810
    @ExiviuZPosted over 2 years ago

    Set 100vh and 100vw to parent then put margin auto to the child you want to vertically and horizontally center. You can also set display grid then set place-content:center.

    https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

    0