Skip to content
OverviewSolutions
8
Comments
6
Chiquita Minor
@MichelleMinor87

All comments

  • Chiquita Minor•170
    @MichelleMinor87Posted about 2 years ago

    lol thats ok you did awesome with your design. Keep up the good work.

    Marked as helpful
    0
  • Adeh Roland•90
    @adehseniorSubmitted about 2 years ago

    I could not figure out how the image was given that violet color, I tried background color with opacity but still did not work.

    Stats Preview Card Component

    2
    Chiquita Minor•170
    @MichelleMinor87Posted about 2 years ago

    you could use the mix-blend mode with the content and after pseudo for the css you have to make the background a color though for instance if the background color of that image is violet then your mix blend mode could use overlay try Kevin Powell on youtube he explains all of this very well. You could also use a div make it a class, but don't put anything inside the div use z-index and position absolute with this one. Hope this helps

    Marked as helpful
    0
  • Trae Zeeofor•490
    @traezSubmitted over 2 years ago

    What I learned:

    1. Getting more familiar implementing multiple backgrounds
    2. How to pay attention/build for specified width
    3. Enabling responsive using aspect-ratio and sub-container width
    4. Used gap property to manipulate spacing in Flexbox
    5. Using grid-template-areas to eliminate the mathematics of grid-areas

    Continued development:

    1. Forgot to implement "hover states". My apologies.
    2. Having done 11 CSS-HTML projects, I feel comfortable manipulating CSS usefully.
      Truly I was barely scratching the surface previously.
      Now time to move on to Javascript review and projects.

    @traez's Huddle landing page with a single intro... using HTML and CSS

    2
    Chiquita Minor•170
    @MichelleMinor87Posted over 2 years ago

    This looks awesome keep up the great work!

    0
  • Nelson Rosario•50
    @NellyisDevvSubmitted over 2 years ago

    I feel like I wrote a lot of scribble code trying to get everything to look correct, I would love suggestions that would make my code more efficient! I wrote sass, but the CSS file is also in the repo. One thing I really want to stop doing is using position relative and find a more efficient way to position items.

    Stats Preview Card

    1
    Chiquita Minor•170
    @MichelleMinor87Posted over 2 years ago

    I think your project and code looks great. I noticed you used filter in your css for your image which is cool I have never heard nor tried that one. You should try the mix blend mode for the image its pretty cool as well as the picture tag and source media tag they helped me a lot in this project. I've recoded this project at least 5x and always run into a bump.

    Marked as helpful
    0
  • Kratai•10
    @KKTTAAIISubmitted over 2 years ago

    How do I scale the svg tag? I tried using just width and height but that does not really scale the tag. How do I make the image smaller or bigger?

    Product Preview Card

    2
    Chiquita Minor•170
    @MichelleMinor87Posted over 2 years ago

    I'm not sure about the svg tag you can check css tricks about that part, but I used the picture tag with source media tag and that helped with the responsiveness of the image. You can also try width 100% height auto that helps sometimes as well! Hope this helps you did awesome keep it up!

    0
  • Andrew Festa•50
    @afesta12Submitted over 2 years ago

    My solution feels quite a bit 'hacky', which is the best word I could come up with.

    I could not get things to line up correctly using flex, so I switched the layout between flex and grid during a media query, which I'm assuming is not a best practice solution.

    I did learn a bit about displaying different images, but is there a preferred method to doing this? Display none seemed to work, but I also read about people using a background image.

    Thank you, and any feedback is highly appreciated! =)

    Responsive Card Using Grid and Flex

    6
    Chiquita Minor•170
    @MichelleMinor87Posted over 2 years ago

    This looks amazing! I learned about the picture tag recently and it helps with responsiveness as well so try that tag on your next challenge. I'm not sure about the flexbox and switching to grid neither. I think over time you will find what works for you honestly. I think that grid is great for certain projects as well as flexbox, but I guess they both should be fine.

    1