Portfolio Q (relating to Basic Front End Development Projects)

Hello all - I am a new camper and total beginner in FE coding.

I completed my Portfolio challenge with the page layout modeled after that created by camp counselor Justin Sane. I posted a Q to his comment page about page rendering on Safari, but not getting a response. Could the experts on here help me with my question please ? Here goes :

In the “Contact Me” section of my page, I have 2 groups of elements. When viewing the page on Chrome on a laptop, the 2 groups display side by side (as expected). However on Safari (on laptop) they stack one after another - like on small devices.

I have Flexbox [-webkit, -ms-flexbox and flex] and breakpoint [@media(min-width:1023px)] in my CSS file to handle responsive rendering, which works as expected on Chrome, why is it not working for the “Contact Me” section on Safari ? Do I need to add more breakpoints and if so, what would those be ?

Thank you

Could you please post a link to your code?

Hi @PortableStick, thanks for responding. The link to my page is http://codepen.io/atan4583/full/mWGvmJ/

In case you want to take the HTML and CSS and run on Safari browser on laptop, I have the following external resources included in the HTML setting of my Codepen. You will need to add a line in the HTML head section to reference my CSS file of course.

meta name "X-UA-Compatible" content="IE=edge"
meta name "viewport" content="width=device-width, initial-scale=1"


I was able to get your alignment issue squared by taking out a couple of rules:

main header, #portfolio .grid, #contact>div, footer #footer-above{
  -ms-flex-flow:row wrap; /* <--delete */
      flex-flow:row wrap;  /* <--delete */
  margin:0 auto; 

Unfortunately, this seems to break your navbar in Chrome. In general, your code is duplicating a lot of Bootstrap’s functionality. You may consider consulting the documentation to pare down your own CSS and rely more on Bootstrap.

Thank you @PortableStick ! Appreciate your comment on BS functionality. The example code by camp counselor uses JQuery to implement the navbar, which is out of my league as a beginner now (plus I don’t want to copy and paste all his code), that was why I went for (the easier for me to understand) BS ScrollSpy implementation to achieve the same effect. I got the challenge done to move forward with the curriculum, but do realize the page has lots of room for improvement. This will take a while as I mainly rely on searching for free resources on the web + W3School doc. I may never make it to be a decent developer, but that is ok - better to try once for the experience. Thanks for stepping in to help though.