Skip to content
OverviewSolutions
10
Comments
2
ilyemm
@ilyemm

All comments

  • ilyemm•140
    @ilyemmPosted over 1 year ago

    Hey Jonfernando,

    Great job with the design! It looks very similar to the original.

    Looking through your code, I see you set a lot of fonts, widths, and heights with pixels which are absolute units. This means the font will stay that pixel size regardless of the layout. What I've been recommended to help with making things more responsive is looking into rem/em which can help with making the font, width, and height more responsive.

    A video I personally thought was a great starting point into understanding the different units of measurement CSS has been Kevin Powell's "Are you using the right CSS units?" where he gives a general outline of which units he uses in which scenarios. In general, Kevin Powell is a great resource for CSS.

    Hope this helps, and happy coding! :)

    Marked as helpful
    0
  • Najwa Sallehudin•10
    @ojanieySubmitted over 1 year ago

    I am still find it hard to understand how sizing works especially if it mobile/desktop views. How to make it good looking?

    QR code

    1
    ilyemm•140
    @ilyemmPosted over 1 year ago

    Hi Najwa,

    It looks good so far! I'm not sure what you mean by sizing works for mobile/desktop views, but I'd definitely look into flexbox and grid as that was something that was recommended to me for aligning things.

    Additionally, I'd look into rem/em for sizing as well as I've used it often for not just font-sizing but also for setting margin and padding. :) I recommend Kevin Powell's "Are you using the right CSS units?" video to get a good understanding of the different units you can use to set things.

    In regards to this solution, it looks like your solution centers pretty well regardless of the window size though I can't check width sizes lower than 447 pixels on my desktop.

    You didn't ask about text, but it looks like the text stretches wider than the sample given. I'd use max-width as a way to control how much the text can stretch in a <div>.

    Hoped this helped, and happy coding!

    Marked as helpful
    1