Sunny Travel Company! Would love feedback!

Code Feedback
1

Hello!
Would you take a moment to check out my product landing page project for the Sunny Travel Company (fake, btw :slight_smile: ): https://codepen.io/hilbug/full/bGgQMqM

I build pretty much everything with Bootstrap but decided to go outside my comfort zone here and instead used vanilla CSS based on Flexbox. If Iā€™m being honest, it feels like a hot mess. :sweat_smile:

There are still a few quirks I am trying to iron out for small screens with little success. You can see this by selecting iPhone X in the inspector:

  • nav-bar button text is wrapping so it looks sliced in half
  • nav-bar buttons are not stacking
  • header log & text is not centering
  • Lessen the space on either side of the ā€œabout usā€ paragraph
  • Figure out a better way to space out footer-links so itā€™s centered

Any and all feedback is greatly appreciated! ~HiL

1 Like
2

I havenā€™t tried using wrap value in flexbox so Iā€™m not too sure what it does. It just so happened that Iā€™m looking at your site through iPhoneX and I can see the errors that you were talking about. On one of my pages, I changed the flex direction to columns for smaller screens. You might want to look into that, but if you want to keep using rows then maybe smaller font size or cut down the words into small ones (ex: About us > About) It seems that you already know how to fix the content margins. Anyways, Iā€™ll take a look later through my PC and play around with the margins. The content blew me away though. Keep up the good work!

1 Like
3

Nice page! I especially like the use of icons.

You can add white-space: nowrap; to your .nav-bar a selector which will stop the text from jumping down. But you might not need to bother with this if you fix the next problem.

Adding flex-wrap: wrap; to your .nav-bar > ul selector will make the links jump down when they donā€™t have enough space. For some reason they then overlap each other but perhaps use margin to fix this?

Adding justify-content: center; to the .header-logo selector will center it (but you might just want to do this as a media query for smaller screen size).

Remove width: 60%; from the #about-us > p selector to let the text stretch out, then add a bit of padding to the sides so the text doesnā€™t touch the edges. You can add a max-width so that the text doesnā€™t stretch too wide.

Maybe experiment with flexbox for the footer-links?

1 Like
4

@Trek182021 @Aspiring_Coder Thank you both! I appreciate you taking the time to review. I made some changes and now I think it looks much better on the smaller screens. I updated the font size on the nav buttons, decreased the font size and updated the width for the about us text, and removed ā€œspace-betweenā€ set for the header so things are now centered. Iā€™ll deal with the footer later. Thanks again! ~HiL

5

It is super nice! Brava

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.