Would you take a moment to check out my product landing page project for the Sunny Travel Company (fake, btw ): 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.
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
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!
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.
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?
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).
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?
@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
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.