Skip to content
OverviewSolutions
20
Comments
5
leverh
@leverh

All comments

  • leverh•300
    @leverhPosted over 2 years ago

    Looks really good!

    You can add a little gap on the button flexbox to give the icon and text a bit of breathing space by just adding: gap: 1rem (or whatever measurement you use- you can even use percentages). Here's a good link with the details in case you're interested: https://css-tricks.com/almanac/properties/g/gap/

    0
  • 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
    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
  • Yann•190
    @neuyannSubmitted over 2 years ago

    I cant find the grey color of the first <p> . it's not included in the readme file isnt it?

    feedbacks are welcome !

    CSS grid and DIY again :)

    2
    leverh•300
    @leverhPosted over 2 years ago

    Hey Yan, I think the whole thing looks great! As far as the grey goes, i used hsl(218, 22%, 67%) on mine. I use visual studio code which allows you to hover over the color you coded and then change it through the visualization of the color palette. Don't know if you can you it with scss though (that i noticed you're using).

    Marked as helpful
    0
  • Carlos Gabriel Carreño•170
    @carlosGabrielCarrenoSubmitted over 2 years ago

    Hello friends how are you? I wanted to consult you about a problem that I have in the active states of the image, when hovering over the icon it doesn't work quite right for me, and its position is also giving me problems... affecting another element with hover is the task that it was difficult for me! thank you very much to all!

    card using CSS flex-box

    1
    leverh•300
    @leverhPosted over 2 years ago

    Hi, I think you did that really well! I don't know enough to offer any proper advice. But you could add some transition to your hover states to make the effect a bit smoother. Again, i am no expert so you should check the syntax and experiment with it but check out the transform and transition properties. Hopefully somebody with more expertise can give you some pointers :)

    0
  • leverh•300
    @leverhPosted over 2 years ago

    Thank you for the feedback :) Will do!

    0