Responsive Web Design Feedback Needed!

I just finished the class yesterday, officially. I was done a week or so ago, but i hated my design and deleted it all :sweat_smile:

Since I’ve spent most of my life in a shell and have become super freaking bored because of it…I’m putting myself out there. My Codepen

Let me know what yall think. Any and all help is appreciated.

Thank you

2 Likes

It looks really good but there a few things that can make it look better.

  1. The background color is a little too strong. I think simple colors such as white or a two-tone design like back-white do a better job.

  2. The navbar is too big. If you want to make it fully responsive without giving it a width, here’s what you can do.
    Put your navigation bar inside a div and do the same thing for your main (or header +
    main + footer) content and give each div a class or id.

    Put your navigation div and main div inside a general div and give it a class or an id.
    give this div a display:flex, flex-direction:row, align-items: flex-start and
    width:100%.

    give your navigation flex-shrink:0, flex-grow:0 and some padding if you like.

give your main content div a min-width:0.

DONE.

As you’ll see, your main content and navbar will automatically fill the screen without giving any of them a predefined width, making your website look good on any device.

2 Likes

thank you :slight_smile: i appreciate the advice and will be implementing that today

1 Like