Skip to content
OverviewSolutions
10
Comments
21
Abdullah Nassif
@AbNassif

All comments

  • Alex•710
    @alexcarmonadevSubmitted almost 3 years ago

    Do you think the code needs any changes? Please let me know so I can keep improving. And if you liked it, you know, give me a lot of love by pressing the like button.

    mobile first

    2
    Abdullah Nassif•405
    @AbNassifPosted almost 3 years ago

    Love your work man! Would you mind if I asked how'd you manage to size the elements just like the design?

    0
  • Abdullah Nassif•405
    @AbNassifPosted almost 3 years ago

    Looks really good!

    Marked as helpful
    1
  • Abdullah Nassif•405
    @AbNassifPosted almost 3 years ago

    Great job man!

    0
  • Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    Hello again man!

    Hope you remember our interaction on your first project.

    Really love how much you have grown in such a short amount of time, Your code looks really clean!

    You can focus on mobile responsivity now.

    Great job, Keep up the good work.(Thank you for inspiring all of us with your dedication!)

    0
  • Sam•205
    @suansenSubmitted over 3 years ago

    Was unable to create the card and alight into a box in the center.

    HTML CSS

    2
    Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    Hey man, would advise you to go watch at least 2 walkthroughs of HTML and CSS website on youtube, code along then come back here and practice.

    Don't give up!

    0
  • Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    Amazing job!

    0
  • Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    Greetings,

    This looks quite amazing, you're really skilled. I learned quite a lot from you while reviewing your code.

    Frankly, the only problem you're dealing with is that you have to scroll to view the whole card, and the card could be perfectly aligned in the center without the need of scrolling(This could cause problems in real-life cases as whitespace is really important).

    To fix this, add a width of 100% and a height of 100% to the head and body( I saw that you tried to align the content in the center when you applied the align-items property in the body, but the reason it didn't work is that the body wasn't taking the full space of the page and those properties above will fix that).

    But this will cause problems with the media query when the screen gets smaller(The upper part of the card won't be visible as it's gonna be shoved on top of the page) To fix this you can add (height:100%) to the .main in the 767px media query you wrote, and it will take it's children's height accordingly and wrap around it responsively.

    Ps. Great job on adding animations to the attributes, it took me by surprise :).

    Overall, great work! keep it up.

    Marked as helpful
    1
  • Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    Besides the top right button and the footer having a different color, this looks quite good!

    Good job, keep it up.

    1
  • Marko Stanojevic•10
    @greardrearSubmitted over 3 years ago

    I couldn't figure out how to get rid off the containers white spaces around the content in smaller screens, if anyone has a solution please, do tell :)

    Pure Html and CSS

    2
    Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    Hey man, A problem I'm seeing is that the container isn't being aligned perfectly in the center, and it's being pushed out of the screen( I have to scroll horizontally then go down vertically to view the cards).

    And after some inspection, I've found out that both your HTML and body tags have a fixed height of about 37px. Now usually the container shouldn't be overflowing from the content, But you gave it a fixed height and width along with some fixed margin inside it which forced the parent elements to remain small while the child(.container) has to be bigger which caused it to leave it's parent's confines to abide by the fixed properties.

    Adding fixed pixels isn't always optimal as it wouldn't be responsive across all devices like you hope it would.

    Things you can change to align the items perfectly:

    Add html, body,.container,.wrap{ margin:0; padding:0; width:100%; height:100%; }

    then add align-items: center to the div with the class of wrap.(Since you're using flexbox, you don't need to use margin: auto as you can already use align-items to align the elements vertically).

    now the cards will somewhat work on all devices with big screens, but as it reaches around 900 px, the items will stretch to the whole width( You can then fix it with media queries by either giving the wrap a percentage width, or some padding).

    Important: Most coders usually include this default code in their projects . *(star means select all tags){ margin:0;(will remove the margin as some elements have them by default like the body for example) padding:0;(same reason as the margin); box-sizing:border-box;(people prefer this as it makes adding padding easier, look up how it helps on w3schools, their explanation is better) }

    Ps. next time just use one container for the cards (No need for the .wrap element)as that would be enough to manipulate the cards using Flexbox or CSSGrid.

    Great work, keep it up and you'll be doing amazingly in no time.

    Marked as helpful
    1
  • Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    The Fourth section ("Div.row lg-row4") is taking too much space along with some padding. Now I didn't investigate the reason thoroughly but it's most likely either an inner child being assigned with too much space, or the parent itself.

    Great job and good luck!

    Marked as helpful
    0
  • Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    What sorcery did you use to get the sizing so perfect?

    Marked as helpful
    0
  • Abdullah Nassif•405
    @AbNassifPosted over 3 years ago

    It's okay, spend more time doing walkthrough's on youtube for now (and code along). Finish a couple of websites then come back here and test your skills

    Marked as helpful
    0