Skip to content
OverviewSolutions
25
Comments
16
P

A1ex

@a1excpunk500 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

View more solutions

Latest comments

  • P
    A1ex•500
    @a1excpunkPosted about 1 year ago

    Great job, I have one little piece of advice, and because you are keen on details, I think you'll like it :) About list item disc styling, you can change colour, size etc. by using ::marker pseudo-element on the li tag.

    Marked as helpful
    10
  • P
    A1ex•500
    @a1excpunkPosted over 1 year ago

    Hello there, congrats on completing this challenge,

    • one thing I would suggest is to use grid {display: grid;} instead of flex. flex can be very useful and easy to use but in some cases, it makes more "trouble" than good.
    • the reason I'm suggesting a grid is that, on screen size change cards squish and space between cards becomes uneven. with the grid it gonna be smoother and easier. you'll need only one parent container and 5 cards that's it, no additional containers and headache on how to position them correctly.
    • A Complete Guide to CSS Grid This is a very good source for understanding grid, for any level.

    Keep going, keep learning and of course keep coding.

    0
  • P
    A1ex•500
    @a1excpunkPosted over 1 year ago

    Good start, keep on practising. About suggestions:

    • about media queries, less is better and in this case, you don't need 2, write "main" and go from there to desktop or to mobile screen size (depends on which one you'll make the main one). browsers are doing a good job of making everything responsive so there is less styling code needed from developers regarding that aspect.
    • the fixed width is messing a lot for responsiveness, try relative units like %, rem, em and so on. Also, max-width and min-width can be your friends.
    • lastly, if you have media queries (especially several), don't copy the whole block of code, set initial values and when media queries are needed (on specific width for example) they will override only the part that is different for that width and needs to be changed.
    Marked as helpful
    1
  • P
    A1ex•500
    @a1excpunkPosted almost 2 years ago

    Good job, but some style issues were noticeable,

    1. on the main page cards text is shifted to the side, if the width of the screen is more than 1440 (I was not checking intentionally, it happened that I saw your solution on a bigger screen.)
    2. same issue as above but on the stories page, but here not the text is shifted but the whole cards grid behaves a bit off.

    I guess it was a 1440 limitation in the guidelines, but if you put a limitation, put it globally, so some parts "don't know" screen is wider. (in this case, the grid container knew so it went on but the cards didn't adjust)

    and 3. on the pricing page, the toggle transform between monthly and yearly is a bit off.

    keep going and once again, good job.

    Marked as helpful
    0
  • P
    A1ex•500
    @a1excpunkPosted almost 3 years ago

    Good job on the desktop version but the mobile version looks a bit off.

    1. image borders.
    2. width.
    3. transition from desktop to mobile.

    Good luck and keep coding 🤘🏻

    0
  • P
    A1ex•500
    @a1excpunkPosted almost 3 years ago

    Good job, but one thing that stood out is height when the screen is shorter than the component, the component doesn't scroll, top part "disappears".

    tip_1: Use, in your case, body{min-height:100%;} instead of just height. tip_2: Add some body padding to separate the card from the edges a little bit.

    Good Luck and Keep Going 🤘🏻

    Marked as helpful
    1
View more comments