Skip to content
OverviewSolutions
3
Comments
5
Oleg
@scobox

All comments

  • khalagai•360
    @khalagaiSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Managing responsive text without the use of media queries.

    What challenges did you encounter, and how did you overcome them?

    Sizing text without the use of media queries. The clamp() property was fun to learn.

    What specific areas of your project would you like help with?

    I am happy with the overall layout, however, I would appreciate input on how I can improve my code.

    Blog Preview Card

    2
    Oleg•80
    @scoboxPosted 5 months ago

    Good result! I like the transition properties you added! Things requiring attention:

    1. I prefer not to use <body> as a flex container. I suggest wrapping the whole card into a wrapper, for example div with ".card" class, and use ".container" as a flex container.
    2. I would add "margin: 0 10px; to ".card"( in your case ".container") to make small gap on the sides of the card on small resolutions.
    3. also on small resolutions card does not displayed correctly as you set up "width:340px". You should have used "max-width:340px" instead to fit the card to mobile screens.
    4. And last one: for all internal elements you set up margins to make the gap between each element and left edge of the card. In such cases I would use "padding-left: 24px" on ".container" element and remove all paddings on internal elements.
    Marked as helpful
    0
  • Oleg•80
    @scoboxPosted 5 months ago

    Good try overall! I like that you added padding to the card on small resolution to prevent sides of the card sticking to the sides of a screen, i.e having a small gap. Some issues:

    1. Card size is bigger then it is in the design( should be 320px, not 400px).
    2. On small resolutions width/height ratio breaks making the card looking not a per design.
    3. I would not use <body> as flex container. I would suggest using ".container" to have the background color and center the card itself; that solution would require additional <div> with, say, class ".card".
    0
  • PassingNoobFromMinecraft•10
    @PassingNoobFromMinecraftSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'll Prolly make use of the clamp function I barely used it Cos I just learnt how And I'll Position the div first next time I thought I had corrected it

    What challenges did you encounter, and how did you overcome them?

    Adaptive text, Clamp function

    What specific areas of your project would you like help with?

    The centering If possible help with css grid and flex

    Qr Code Challenge

    1
    Oleg•80
    @scoboxPosted 5 months ago

    Not bad overall!!! Good try! couple of issues:

    1. not responsive design: on small resolutions - all breaks.
    2. Size of the card is not as per design - should be 320px.
    3. I would suggest using class ".card" instead of the ".clamp", and used "margin: 0 auto;" to center it instead of "transform-translate"
    Marked as helpful
    0
  • Oleg•80
    @scoboxPosted 5 months ago

    Size of the card is not as per design, should be 320px, used 230px instead. Class ".master" is not informative, I would rather used class ".card". Title and text (on the card) preferable to be put into <h2>(or <h3>) and <p> tags instead of just <div>'s.

    1
  • Oleg•80
    @scoboxPosted 5 months ago

    I would wrap all card components into .card class, not just using .container.

    Also, adding margin: 0 10px; to the .card( in your case .container) would make small gap between the card body and edge of a screen on small resolution(<300px).

    No point of using section.image and section.text as section is meant to be used for logical chunks of a webpage, not part of one element as card.

    Marked as helpful
    1