Portfolio Q (relating to Basic Front End Development Projects)

1

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

2

Could you please post a link to your code?

3

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"

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
4

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{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-flow:row wrap; /* <--delete */
      flex-flow:row wrap;  /* <--delete */
  -ms-flex-pack:distribute;
      justify-content:space-around;
  -webkit-box-align:start;
      -ms-flex-align:start;
          align-items:flex-start;
  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.

5

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.