Skip to content
Submitted over 2 years ago

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

Cornflakes•290
@CornflakesPlus
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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.

Community feedback

  • 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
    Cornflakes•290
    @CornflakesPlusPosted over 2 years ago

    @ExiviuZ Nice! Thanks for that!

    0
  • leverh•300
    @leverhPosted over 2 years ago

    Hi Cornflakes, I'm no expert but i don't think you should be wary of using flexbox and grid. As far as i understand, floats are an old fashioned method of placing text around images- much like how newspapers and magazines used to work. But times have changed and luckily we have flex and grid to help us create prettier and more functional website/apps designs. Here's an article i found on the matter (it's short... ;)): https://nimblewebdeveloper.com/blog/css-float-deprecated Other than that i thought your solution looked even better than the original ;)

    xx

    1
    Cornflakes•290
    @CornflakesPlusPosted over 2 years ago

    @leverh Blushing. Honestly, I would rate my solution 4/10 ;D. I see you're trying to lift my spirit (Which I desperately need). :)

    "A man must first endure the pain of using floats to truly appreciate Flexbox" ~ Master Oogway

    I think I've endured enough. So it seems I might jump into Flexbox for my next project. Thank you for the kind words. I've seen your profile, not pretty bad yourself maybe start calling yourself an expert ;).

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord