Skip to content
OverviewSolutions
6
Comments
148

Fatlind Shehu

@fatlindshehuKosovo2,230 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi, Nice work with the challenge, although I would recommend centering the component using flexbox and not margins, here's what you can do:

    • display: flex to set the div/component as a flex container.
    • justify-content: center to center the div/component horizontally.
    • align-items: center to center the div/component vertically.
    • Make sure the div/component has a height.
    • If you’re unfamiliar with flexbox, I would suggest checking THIS

    Also, I would recommend avoiding the use of px together with rem, instead, go only with rem

    Keep it coding...

    Marked as helpful
    0
  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi @tbensheimer

    There is a way of seting the border-radius only on the container and showing also on the image, you can do that like this:

    .container{
  border-radius: 10px;
  overflow: hidden;
}
    • I would suggest using rem or em units, instead of pixel units, px can cause Issues when trying to make your site/component responsive.

    Now you can remove the border-radius on the image!

    Keep it up :)

    0
  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi,

    Your component looks good, but you have a hover state you need to work on, in case you don't know how to approach that, here's my suggestion:

    • Create a div and place it above the image, using position: absolute
    • Center the div:
    display: flex to **set** the *div/component* as a *flex container*.
justify-content: center to **center** the *div/component* horizontally.
align-items: center to **center** the *div/component* vertically.
    • Set div opacity: 0 to hide the div on normal state.
    • Set div:hover opacity: 1 to show the div on the hover state, make sure you add the background based on the instructions given by Frontend Mentor

    Keep up the good work!

    Marked as helpful
    0
  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi @candybuy

    Nice work with the component, I think you need to be more carefull with the spaces between elements!

    • I would suggest measuring heights/widths & paddings/margins with more precision, using a tool like FIGMA or Adobe XD helps you a ton!
    • Try not to use two images for two different screen sizes, instead make the image responsive by setting its width/height with %.

    Keep up the good work :)

    0
  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi @panosjapan7

    Your component looks great, I would recommend some improvements:

    • Adding a padding to main in order to avoid the overflow from the browser, make sure to adapt the padding corresponding to the device's screen size.
    • Using a pre-processor like SASS or LESS would be also very nice, for bigger projects, pre-processors make the code reusability and maintenance very easy and also reading your code from other developers is much easier.
    • I would suggest using rem or em units, instead of pixel units, px can cause Issues when trying to make your site/component responsive.

    Keep up the good work!

    Marked as helpful
    1
  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi @ADinezio

    Your component looks great,

    • I would suggest adding margin to the component, in order to prevent the browser from overflowing the component (This happens when resizing from bigger screens to medium ones)
    • You can also set a border radius for the component, (not individually for each card) and use overflow: hidden to make it appear responsively.
    • Using a CSS naming convention would be a nice addition to your skills as a Frontend Developer, my suggestion is to use BEM which stands for Body Element Modifier, check this LINK if you’re interested in knowing more about BEM

    Keep up the good work!

    Marked as helpful
    0
View more comments