Skip to content
OverviewSolutions
15
Comments
78

Hania B.

@techantherePakistan1,280 points

Malware Reverse Engineer who came here to learn some frontend development while mentoring and being mentored. Knows Python, HTML, CSS and Javascript. Follow her on the twitter :)

I’m currently learning...

Sass, JavaScript

Latest solutions

View more solutions

Latest comments

  • Hania B.•1,280
    @techantherePosted about 3 years ago

    Congratulations on completing another challenge! Few things I will like to highlight for help, you are almost overusing the heights and widths and then those too with the viewport units which is not ideal for every container. You should rather set min-height:100vh; in the body selector, and that's all you need. Other than that I don't understand why are you using fixed widths and heights everywhere, like using height:70vh; inside for middle_div is redundant. Your solution is breaking on widths higher than 480px. I think you don't need to set any media queries for this solution. Just set some max-width on .main, some padding in body selector and you are good to go.

    For html structure, span is not required inside the button instead you can directly style button text. Span is mostly used for applying different styles to a small text within the same paragraph, heading or button if there is some text different from the whole text inside the button. You should use anchor tag <a> or button for "change" option and same holds for others like cancel etc.

    Hope it helps!

    Marked as helpful
    1
  • Hania B.•1,280
    @techantherePosted about 3 years ago

    Hmm.. your solution looks great! Just that your card is not aligned in center vertically. Set min-height:100vh instead of height in body selector, and remove overflow: hidden and you are good to go. In fact it's great to never use overflow: hidden unless really required. Setting min-height on body to 100 of the viewport height is also a good thing you will need in most of the solutions.

    Good luck for your future projects as well. Happy coding :)

    Marked as helpful
    1
  • Hania B.•1,280
    @techantherePosted about 3 years ago

    Your solution looks great!!! But wait h1 can be the main heading with text "Reliable, efficient delivery Powered by Technology" what do you say, I don't see a reason to make it h2 maybe.

    A little problem I am seeing after testing on smaller screens, a horizontal scrollbar starts showing under the width 375px and margins on right of cards starts decreasing, I couldn't understand from where did this come, can you please verify.

    0
  • Hania B.•1,280
    @techantherePosted about 3 years ago

    You should design mobile-first, where you first design for mobile screen size and then apply media queries for larger screens like this: @media only screen and (min-width: 768px) { code for this screen size}

    or apply large value for min-width like 1440px, which is the size of the screenshot you see above.

    0
  • Hania B.•1,280
    @techantherePosted about 3 years ago

    Hmm.. you should probably start using flexbox, this is the perfect little course on Flexbox for you. Hope this will help solve this challenge as well. Just in case you know about flexbox but not comfortable applying try this cheatsheet on flexbox. Here is the another one Flexbox Froggy for practice.

    I am sure they will help you apply those tiny changes required to make this design look good. Just apply flex box on the div with "plan" class (btw nav should not be used inside there ) and you are good to go.

    Marked as helpful
    0
  • Hania B.•1,280
    @techantherePosted about 3 years ago

    It looks great on larger screens. For smaller screens, it doesn't work. You should start mobile-first design, where you design for smaller screens first like you position all the boxes according to mobile design and then use media query @media only screen and (min-width: 768px) for large screen and then 1440px afterwards etc. Using max-width: 375px is unnecessary.

    Marked as helpful
    0
View more comments