Skip to content
OverviewSolutions
9
Comments
7
(Rezzak) MOHAMED ERRAZAK ALLAH
@Rezzak48

All comments

  • (Rezzak) MOHAMED ERRAZAK ALLAH•170
    @Rezzak48Posted over 3 years ago

    here is where I tried (https://www.frontendmentor.io/solutions/huddle-landing-page-with-a-single-introductory-section-xtmdDUtu9#feedback) in this challenge, on the font size of the title

    1
  • Tom•115
    @Tom2612Submitted over 3 years ago

    Attempt at using CSS grid to layout the cards here, doesn't seem as responsive as other projects with the cards being fixed width/height, so any advice here would be appreciated.

    4 Card Feature - HTML, CSS Grid

    1
    (Rezzak) MOHAMED ERRAZAK ALLAH•170
    @Rezzak48Posted over 3 years ago

    Hi Tom, I took a look at you code, it looks good! well done job! here is my tips to make your code better:

    • for the responsive layout, try to make like a tablet version, for example in your design you can do two cards in every row between 700px and 990px, and this is how you will keep it responsive and for the mobile version you already did well!
    • another thing I notice is the design is not centered, there is many ways to do it but I suggest to use the flex box on the body element : body { display : flex; justify-content : center, align-items : center }

    If you found my tips helpful, do not hesitate to mark it as helpful or upvote it, so others can see it first.

    happy coding 😊

    Marked as helpful
    0
  • (Rezzak) MOHAMED ERRAZAK ALLAH•170
    @Rezzak48Posted over 3 years ago

    Hi buddy, thanks for your time! for the unit rem, generally I used auto convert extension, but it causes a problem whenever I want to check sth, bcz I have to convert back to px to understand it. The solution that u gave is absolutely genius one, I really apperciate it man! for the other two issues, I fixed them. Thank you. I really didn't pay attention to the image height, normally 100% is enough as u said! Thank you man for this tip, it is really helpful

    1
  • (Rezzak) MOHAMED ERRAZAK ALLAH•170
    @Rezzak48Posted over 3 years ago

    thanks buddy! what issue u mean?

    0
  • (Rezzak) MOHAMED ERRAZAK ALLAH•170
    @Rezzak48Posted over 3 years ago

    Hi there, good job! I took a look on your code and here are some tips that may help to enhance your design : 1: give your container a max-width and width 100%, that will ensure that the width of the card will not be bigger than what you want 2: give your container a borde-radius

    Hppy coding 😊

    Marked as helpful
    1
  • tony_•70
    @onmywayfromwestindiesSubmitted over 3 years ago

    Hi everyone, here my solution from Frontend-mentor-single-price-grid-component challenge.

    So, please, check my code.

    I wish to have your feedbacks to improve my skills.

    Happy coding !

    Responsive boxes using CSS Grids

    1
    (Rezzak) MOHAMED ERRAZAK ALLAH•170
    @Rezzak48Posted over 3 years ago

    Hi there, I checked your code! Good job! I highly recommend to you to start using css variables especially for colors, it will save you tons of time😊. if u found my comment helpful please "Mark it as helful" or upvoted it, so others can see it first too 😊😊 Happy Coding 😊

    Marked as helpful
    0
  • (Rezzak) MOHAMED ERRAZAK ALLAH•170
    @Rezzak48Posted over 3 years ago

    It is Perfect, I really like it, I had some issue with the border of the image and I took a look at your code, I have only a few notes and a question : 1/ name of the classes: as I said before your work is so professional, how you work with HTML syntax, variables... etc, but name of classes is a little bit hard to follow if you work inside a team, I suggest you to take a look on Case Styles , check here :(https://betterprogramming.pub/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841) 2/ the design is not fully responsive ( check design at 1083px width), and the reason of that is that : @media (min-width: 1000px) .card { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(3, 1fr); margin: 10rem 5rem; height: 450px; /* width: 1000px; */ <== here you put a fixed width, which is make it fixed and not responsive with bigger screens and around it (try to put for example width= 80%; and this is just my initial point of view I am sure there is a better solution out there...}

    otherwise, I see that everything is good and professional, I have just a question how did you know exactly, pixels of margins (are u using version pro?)

    0