Feedback for FCC Portfolio Page

Feedback for FCC Portfolio Page
0

#1

Hi there! I just finished my portfolio page and wanted to get some feedback. You can find the project on GitHub (https://github.com/kmalmay/portfolio) or check out the page at katiemalmay.com.

One thing I’ve noticed is that on mobile and tablet the “contact” button in the nav bar is wrapping underneath, and the nav is no longer fixed (just on tablet and mobile). However, when I test it in my browser on mobile and tablet views it works fine. Any ideas on why these things are occurring?

Thanks!


#2

Looks good and great work on keeping it responsive!

As for your nav issue, I couldn’t replicate it in Firefox, it was all on one line as expected.


#3

Thanks for checking it out! I appreciate you looking at the nav issue :slight_smile:


#4

Your site is beautiful and I am a ways away from being able to pull of some of the elegant things I see happening in your script. I hope you don’t mind if I bookmark your post; I like to keep examples of good work for inspiration.

As for your navigation menu, is it supposed to be fixed to the top no matter what? If so, I couldn’t find a position:fixed; label. Also, at the start of the CSS file there are a lot of tags given a 0 margin and 0 padding. If those are all of the tags in the document, you can use an asterisk for shorthand.


#5

I can’t replicate the issue either, what phone/tablet/browser did you see the issue on?

I guess it isn’t impossible that it’s caused by using position sticky, support for position fixed is a lot better.
https://caniuse.com/#search=sticky
https://caniuse.com/#search=fixed

If you use fixed instead you will have to adjust things a bit to get the page layout to look the same, position fixed takes the nav out of the normal document flow. Adding the height of the nav to your header element as padding-top should do it I think.


#6

Hi there @ComposingCode! Thank you for the kind words. I’m glad you like my portfolio :slight_smile:. The nav is supposed to be fixed, but I used the “sticky” property which doesn’t have as much browser support. However, it doesn’t take the nav out of the document flow so it was easier for me to work with.

The tags your mentioning are from the CSS reset code (https://meyerweb.com/eric/tools/css/reset/). I’ve been using it in most of my projects and it seems to help with anything the browser is trying to do by default. Thanks for pointing that out though!


#7

Hi @lasjorg, I found the issue on an iphone 6, an iphone plus as well as an ipad. One of the iphones I pulled it up on safari and the other I used chrome and all of them had the problems of the contact button in the nav wrapping and the nav not staying at the top of the page.

Thanks for the advice on using fixed. I tried that initially, and found that it changed the width of my nav and shifted the nav contents, while using sticky kept everything in place nicely. However, it’s probably better to used fixed and work out the kinks since it has better browser support. Thanks for taking a look!


#8

I was able to reproduce it using browserstack. It only happened with IOS devices, no matter the browser. I was using a trial and you only get 30 minutes, plus it’s a bit janky to work with the dev tools, but here is what i found.

  1. I had to use the -webkit prefix to make position sticky work.
    position: -webkit-sticky;

  2. The navs RGBA background-color was marked as invalid. I saw you weren’t using the alpha channel so i just went with RGB and it worked. I later realized the fact that you are missing the fourth argument to RGBA (the alpha part) might cause the property to become invalid on some devices/browsers. In any case, you’re not using the alpha so no need to use RGBA.

background-color: rgba(255,255,255); // Doesn't work
background-color: rgb(255,255,255); // Works
  1. Not entirely sure what is going on, but it kinda looks like a width issue causing the last .nav-item to wrap. The simplest solution i came up with was moving the .nav-item spacing from margin-left to margin-right, and then use the :not(:last-child) selector to skip the last .nav-item. You might need to make some more adjustments to make it look exactly like before.
.nav-item:not(:last-child) {
  /* margin-left: 1.5rem; */
  margin-right: 1.5rem;
}

Have you considered making a mobile nav?


#9

Thank you so much for all of your research and insights into my nav issues. I hadn’t noticed the rgba missing an alpha value before; I went ahead and changed it so that it’s not marked invalid. I also added -webkit-sticky to my nav position.

Since you mentioned it’s an IOS issue, I opened it in Safari (which, you were right, looked just like mobile, with the Contact button wrapping. After using your .nav-item:not(:last-child) margin fix it looks much better now!! Thanks so much!

I did consider making a mobile nav. I’ve done it for a project previously, so I might just use the code from that. It’s probably a good idea from a user experience perspective. :slight_smile: