Skip to content
OverviewSolutions
2
Comments
20
jerry
@realsale

All comments

  • jerry•300
    @realsalePosted over 2 years ago

    Yo! @shaswatsingh19,

    Congrats submitting your solution to this design, it's a great start

    You're solution is actually responsive, and you're following desktop first approach, and I've notice you're aligning your component with the old approach using margin auto on left and right, there's nothing wrong in that especially in simple layouts, however its hard to create complex layouts with that approach.

    In terms of responsive web design I recommend learning the following:

    • @media query as it allows you to add breakpoints which you can use to target specific screens, devices, dimensions, orientations etc. Using media queries
    • mobile first approach when doing responsive web design, It is recommended to design the mobile first before moving on the larger devices(This will make the page display faster on smaller devices) How to write mobile first
    • flex and/or grid as these are the modern layout approach Beginners guide to flexbox | Beginners guide to grid
    Marked as helpful
    0
  • Mr Skyner•30
    @MrSkynerSubmitted over 2 years ago

    Hello! This is my solution for the project named Stats Preview Card!

    Any feedback it's helpful! Thanks for checking and feedback!

    Stats Preview Card

    3
    jerry•300
    @realsalePosted over 2 years ago

    Yo! @MrSkyner,

    Congrats submitting your solution for this design.

    The obvious thing that might need refinement is your alignment, I've noticed you haven't use flex nor grid and hardly relied on margin and some fixed dimensions.

    I recommend you to try and learn flex and/or grid as these are the modern layout approach Beginners guide to flexbox | Beginners guide to grid

    Also you don't have to explicitly define the containers height, Just set the similar width as the design, and let the image take the half of it and leave image height: auto, This will keep the image proper aspect-ratio

    Marked as helpful
    1
  • Kate•30
    @unic0rnKateSubmitted over 2 years ago
    1. still don't know how to make such a soft shadow as on original example, i searched everywhere, couldn't find it :(
    2. Hard for me to put <p> and icon or image in 1 line together. Somehow i did it but not sure if i did right.
    3. I couldn't make a white border on avatar picture. I tried "border-width" with "border-color" but it didn't work.

    Please help me if you know how to do it. Thank you!

    CSS HTML

    3
    jerry•300
    @realsalePosted over 2 years ago

    Yo! Kate,

    First of all congrats submitting your solution, It wasn't bad at all.

    Regarding to your question:

    1 To make a shadow looks like a gradient or fading same as the background, I use the original background-color and adds three layers of it with different sizes and lightness using the hsl

    .component {
  box-shadow:
    0 0 45px hsl(217deg 54% 11%), // largest layer, same color and lightness
    0 0 35px hsl(217deg 54% 9%), // middle layer, same color with decrease lightness
    0 0 20px hsl(217deg 54% 6%) // inner layer, same color and the darkest
}

    2 There's a couple of way place an image and a text content together, One way is using flex, Setting display property to flex allows you to use other flex container properties e.g. justify-content|align-items etc. that can be used to manipulate and controls flex-items(children)

    Beginners guide to flexbox

    // markup
<div class="tag">
  <img src="./some/path" alt="foo" />
  <p class="tag__details">Foo bar</p>
</div>

// style
.tag {display: flex; align-items: center;}
.tag__details{margin-left: 6px;}

    3 Make sure you set your image dimension length equal both in width and height, then set the border and border-radius: 50%;

    0
  • jerry•300
    @realsalePosted over 2 years ago

    Yo! @VicenteJ20,

    Congrats completing your first challenge, the design looks similar.

    Here are some adjustment you might consider:

    • scale down your components dimension, decrease some width
    • same goes with the main heading, decrease font-size a little bit
    1
  • jerry•300
    @realsalePosted over 2 years ago

    Yo! AxL ⊂(◉‿◉)つ,

    You've properly aligned your component, great

    The obvious adjustment you need to make is

    • adjusting components dimension width
    • increase padding around the details
    • increase font-weight in main heading and button
    • add some box-shadow

    And also don't forget to address some html issues in report.

    Marked as helpful
    0
  • jerry•300
    @realsalePosted over 2 years ago

    Yo! @Waldoozki,

    Great job completing this challenge a little refinement and it will look exactly the same.

    • A little adjustment in components width
    • Increase heading font-size
    • remove padding in details wrapper
    Marked as helpful
    0
  • Olabisi G. Adekoya•70
    @labisigloriaSubmitted over 2 years ago

    Got to learn how to have a responsive image while doing this challenge, though after hosting my code on a live site, the images seems not to be showing, what could have caused it? and i'll appreciate comments on how to get better at this.

    product preview card challenge solution

    4
    jerry•300
    @realsalePosted over 2 years ago

    Actually there is nothing wrong in your file path, however @Sukhanpreet is right images folder is missing in the sources.

    Probably Netlify ignore your images folder as if it is not being referenced.

    You should try suggestion of @elaineleung using ./images, ./ refers to this directory

    Marked as helpful
    2
  • jerry•300
    @realsalePosted over 2 years ago

    Yo! Hector,

    Both flex and grid can achieve the same layout.

    • in flex you can simply set the containers display property to flex, and it will layout the flex-items(children) side-by-side(horizontally), that is because of flex-direction: row which is a default property value in flex container.
    • while in grid you need to set the containers display property to grid and also specify how many columns you want your grid should have using grid-template-columns, it can be also be used to specify the size(width) of the column.
    Marked as helpful
    0
  • Terry•10
    @tbabyukSubmitted over 2 years ago

    I ended up using "display: grid" for the desktop version and "display: flex" for the mobile. Would be curious if you used a different technique, perhaps the same display for both versions? Let me know!

    Product Review Card Solution - using Grid and Flex

    4
    jerry•300
    @realsalePosted over 2 years ago

    @Yo Terry,

    Great job, it's pretty close to the design!

    Regarding to layout approach, I use grid just to center my component, and in desktop version I use flex property to simply layout my component content side-by-side(flex-direction: row; default).

    1
  • Eric Kobliska•90
    @kob112358Submitted over 2 years ago

    I ended up hard coding dimensions for my card at different media sizes - how common is that when working at a company? Should I have focused longer on making it fully responsive at different widths?

    Thanks!

    Responsive Comonent Card HTML / CSS

    1
    jerry•300
    @realsalePosted over 2 years ago

    Yo! Eric

    Combination of fixed sizes and @media query isn't uncommon, It's still somewhat responsive since you're actually changing it's dimension at different breakpoints

    However it is always better to be flexible most of the time, as it allows you to support and target more screen sizes and devices.

    Instead of using just width try to understand min-width and max-width property. Same goes with height using min-height and max-height property for vertical dimensions.

    And also the use of relative units(em, rem, % etc...).

    When working on the company or any other clients, most of the time the provide pre-made wireframes and mockups for their target audience and or devices

    Marked as helpful
    0
  • Aswin Harikumar•90
    @i-am-ashwinSubmitted over 2 years ago

    please provide feedback on what you think.

    I tried using css variables.

    I have not added any media query since it should work fine with mobile as well.

    QR Code with flex layout

    1
    jerry•300
    @realsalePosted over 2 years ago

    Yo! Aswin,

    Congrats completing this design, you properly align your component.

    And what you did is just right, this design doesn't need the use of @media query since the design is just the same in both devices.

    In addition, I guess what's need improvement is your padding it's a little bit inconsistent, adjusting components width and little tweak in border-radius in your image will gives it a better look.

    Marked as helpful
    1
  • Akanni Feyisara•110
    @Feyisara2306Submitted over 2 years ago

    What other method can one use to add color to images? The image-overlay method I used distort the card responsiveness somehow. I don't know if it's because of the height. Any feedback will be appreciated, thanks!.

    Responsive preview card using CSS flexbox

    2
    jerry•300
    @realsalePosted over 2 years ago

    Yo! @Feyisara2306,

    Great job!, just a little refinement and it will look exactly the same.

    Regarding to your question, you're doing just right in overlaying element, However what's gone wrong is it's height dimension, It exceeds parents height and then cause an overflowing

    overflow happens when you add overlay div that is because of it's heightyou use vh unit which is relative to viewport instead of % which is relative to the container where it is contained.

    Just replace height from vw to 100%(relative to containers full height)

    One more thing, I'm not familiar with<solid> tag and what it's primary purpose, but it costs you an html issue in the report, better to replace it with <span> tag.

    Marked as helpful
    0