Skip to content
OverviewSolutions
18
Comments
6

Florin.Porut

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

  • Florin.Porut•380
    @zastar23Posted almost 3 years ago

    Use header, main, footer, don't use div's for landmark components, the images in the footer have a bad path to the img source, try and start working on mobile first design, it is easier because you don't have to worry so much about layout stuff(untill you get to bigger screens). Learn about rem, em, vh, vw, vmax and vmin, don't use fixed units (px).

    0
  • Florin.Porut•380
    @zastar23Posted about 3 years ago

    Hello, to get rid of the space between the name and the verify graduate, just change the line-height in the div containing them and you should be good to go.

    Overall nice job done!

    0
  • Florin.Porut•380
    @zastar23Posted about 3 years ago

    Hi @FrancisKhaledKhodja,

    The end result looks nice, but you should try to code mobile first responsive, for me it is much easier, because if you remember, every html document is already responsive at any screen size before adding any css styles.

    With that in mind you can code mobile first without having to worry about layout stuff in the beginning, as for the problem that you had and wrote two style sheets, I think the solution to that is to learn about media queries and breakpoints.

    Hope this helps, Happy coding!

    Marked as helpful
    1
  • Florin.Porut•380
    @zastar23Posted over 3 years ago

    You can do mobile first, it solves all your problems, any html you create is already responsive if you don't set fixed widths and heights on you're content.

    Learn about em, rem, vh, vw, etc and use them instead of fixed widths like px.

    Just play around with the responsive mode in your dev tools and you can figure it out.

    Happy coding!

    0
  • Florin.Porut•380
    @zastar23Posted over 3 years ago

    To get the mobile design, add a media query at 600px (in your case) and change de flex-direction of the container to column, add a width to the container of 80% perhaps, and a max-width of around 20 rem or so to not let the cards stretch so much that it becomes hard to read the text because of the long text lines, and maybe you need to add a bit o padding too to the cards.

    Hope this helps, happy coding!

    Marked as helpful
    1
  • Florin.Porut•380
    @zastar23Posted over 3 years ago

    Hi, you should always consider doing mobile first, and desktop after, for me it is more easy to do it this way.

    I leave you a link about your problem, around the middle of the clip you can find an explanation on typography https://www.youtube.com/watch?v=VsNAuGkCpQU&t=183s.

    Hope this helps ! Happy coding!

    Marked as helpful
    0