Skip to content
OverviewSolutions
13
Comments
7
arey
@arey-dev

All comments

  • arey•350
    @arey-devPosted over 2 years ago

    Great work! I like your layout between 768px - 992px!

    Here's my few comments.

    • You can write @media (max-width:992px) just once, and put all the CSS rules that you want to fall under that viewport size.
    • And maybe, try to maintain the same spacing that you have from 768px - 992px on the top and bottom of the page under 768px viewport width.
    Marked as helpful
    0
  • arey•350
    @arey-devPosted over 2 years ago

    Congratulations on completing this challenge! but there is a slight issue in your code. Only the mobile design is visible.

    Here is why: @media only screen and (min-width: 375px) and (max-width: 1440px)

    you styled the mobile design in the between the range of 375px - 1440px width.

    Maybe you just got confused a little bit. I know you can fix this issue right away, Happy Coding!

    Marked as helpful
    1
  • Žydrūnas•150
    @ZLikasSubmitted over 2 years ago

    Any advice is welcome, the hardest part was changing the button's text to transparent if you know how to do it, let me know.

    3 Column card

    1
    arey•350
    @arey-devPosted over 2 years ago

    Hello! your work is great!!

    I think the button's text and the p tag has the same color. But if you want to reduce the opacity of the button's text. You can use hsla() function, it takes four value. The fourth value is the alpha value, it determines the opacity of the color.

    Example:

    button:hover {
  color: hsla(0, 100%, 100%, 0.5);
}
    0
  • SuperSet1607•310
    @mohit1607Submitted over 2 years ago

    Hi awesome community I tried to imitate the whole design but the only problem I am facing is istead of making a single class for card I made 3 classes which is I know is not scalable . Can anybody suggest what should I do to reduce css code and also suggest some css library so that workflow gets faster. I will appreciate your help

    social-proof-section-master imitation using css flexbox

    1
    arey•350
    @arey-devPosted over 2 years ago

    Hello, congratulations on completing this challenge!!

    Regarding with your problem. Remove the .card2 and .card3 , just have 1 class named .card and then try to use the pseudo-class :nth-of-type()

    div.card:nth-of-type(1) {
  margin-top: 1rem;
}

    :nth-of-type() pseudo-class targets the siblings of the same type based on its positioning. Which is in your case, the div with the class .card.

    Read this for more info :nth-of-type() and If you wouldn't mind, try to look at my solution. Maybe it will help you.

    Marked as helpful
    1
  • arey•350
    @arey-devPosted over 2 years ago

    Hello, nice attempt on this challenge!

    Here's my advice:

    • Try to mimic the web design as much as possible before thinking of responsiveness.
    • Don't use position property on your layout because you will have a hard time making the page responsive.
    • try using display: inline-block or display: flex to layout your main.
    • Last, instead of using image to create icons. Try using Font Awesome
    Marked as helpful
    0
  • Eduardo•910
    @KTrick01Submitted over 2 years ago

    Hi! This is my first challenge in this community, im pretty new with css and html so i would like you guys to give me your feedback, even if it seems basic for you, im sure it will help me!

    NFT preview card component hub + Flexbox

    3
    arey•350
    @arey-devPosted over 2 years ago

    Good day! You work is great!

    Here's my opinion. When using CSS custom variables, It's better to have a flexible name or should I say a 'general' name, i.e., --clr-primary, --clr-secondary, and --bg-clr. In this way, if you would ever change your code in the future, it would only be the value of the property, not the entire declaration. Happy coding!

    Marked as helpful
    0
  • Roshan•20
    @roshanpanda666Submitted over 2 years ago

    the difficult part of the project was placing the icons in their position if you did not open the site on chrome one of the icons that i placed in my card is collapsing i dont know why

    eth view carf using html and css

    1
    arey•350
    @arey-devPosted over 2 years ago

    Nice attempt on this project @roshanpanda666!

    Here's my input:

    • Please follow the styles that Frontend Mentor provided for this challenge. You've downloaded the starter pack for this particular challenge, right? You will find all the guide there, from creating a repository to submitting your project.
    • As for the part that you were having difficulty with, try to study CSS Flexbox and apply what you will learn.

    That's all. Happy Coding :)

    0