Skip to content
OverviewSolutions
9
Comments
5
Safa Ruknuddin
@safruk

All comments

  • Kristina•20
    @zakharovakrSubmitted over 4 years ago

    Hi! I'm super excited about this resource! It was my first time trying to create a layout based on the existing design and I didn't have a sketch file, so I kinda had to guess all the paddings and margins, but I would appreciate any feedback. I'm specifically interested in feedback on working with media queries, I wasn't sure what breakpoints I should use for the mobile-desktop transition. Also, any suggestions on what kind of instruments and techniques would be better to use are really appreciated!

    Cheers, Kristina

    Mobile First using flexbox

    2
    Safa Ruknuddin•385
    @safrukPosted over 4 years ago

    And about the media queries you can set any number of media queries but ideally if you are working mobile first you can have media queries for tablet in portrait (600px - 900 px) tablet in landscape mode(901px - 1200px) and another for desktop (1200 and above)

    Most people use single breakpoint for tablet views somewhere where design doesn't break through trial and error.Its absolutely fine. Depends what design you are looking for.

    Personally I use media queries at 5 breakpoints as it works best for me at all times.Working mobile first

    One for screens above 300.(min-width:300px)

    screens above 600 (min-width:600px)

    screens above 900 (min-width:900px)

    screens above 1200 (min-width: 1200px)

    And if you want to support really large desktops screens above 1800 (min-width:1800px)

    1
  • Safa Ruknuddin•385
    @safrukPosted over 4 years ago

    Hi Mariana.Good job.

    You have set border left radius/right radius etc for each section. Instead you could set overflow:hidden on your grid card and simply set the border-radius attribute in the card itself. This way the design won't break in mobile view. I ran into this same problem the other day. Hah!

    I hope this helps.

    2
  • Kristina•20
    @zakharovakrSubmitted over 4 years ago

    Hi! I'm super excited about this resource! It was my first time trying to create a layout based on the existing design and I didn't have a sketch file, so I kinda had to guess all the paddings and margins, but I would appreciate any feedback. I'm specifically interested in feedback on working with media queries, I wasn't sure what breakpoints I should use for the mobile-desktop transition. Also, any suggestions on what kind of instruments and techniques would be better to use are really appreciated!

    Cheers, Kristina

    Mobile First using flexbox

    2
    Safa Ruknuddin•385
    @safrukPosted over 4 years ago

    Hey Kristina .Nice job! Great progress for first try.

    Maybe you could give a margin to the top most flex container(for mobile view) and fix its width for desktop view.Something like a max-width worked well for me on this challenge. You could give a border-radius as well for slightly rounded corners and add little bit of box-shadow to both the button and top most flex-container to get as close to the design as possible.Also I notice that you haven't added the background color of gray.

    These are all minor fixes.Otherwise kudos.Well done.

    1
  • Safa Ruknuddin•385
    @safrukPosted over 4 years ago

    Really great job! I have noticed you haven't posted in a while. I love to look at your solutions. Really neat sass outlay

    0
  • Safa Ruknuddin•385
    @safrukSubmitted over 4 years ago

    Hi, If you Check out my code/site I would be glad if you notify me of the flaws in the design Which sections of my code are unnecessary? Have i successfully approached flexbox?. In sections where my design breaks what other alternate approach would you suggest.

    Site implemented using Flexbox, sass.

    2
    Safa Ruknuddin•385
    @safrukPosted over 4 years ago

    1 Thanks! Totally missed that 2 Stat section is open sans. Rest all headings are Poppins. Haven't I got it right? 3 I have only these 3 background illustrations. I guess they have updated the starter files to include separate ones for mobile. Will be sure to check that out. Thanks for notifying 4 I'll surely look into That. I should try mobile first as well to get it right. Right now I am stuck with desktop first approach.I have become too habitual and comfortable with desktop first approach

    Really appreciate your honest feedback. Hope to hear more after I fix these problems. Thanks!

    0