Can't get my layouts right with bootstrap

1

Hi, I just started learning couple of days ago (Although I have background knowledge with html and css) and I finished html,css,bootstrap and JQuery here of FCC and my problem is I can’t get the layout right at all with bootstrap, I mean I did all the lessons right but now I’m trying to do the personal portfolio project and everything is messed up. I managed to create the layout from scratch without bootstrap grid and got it right but it will be messed on mobile phones. Can you please take a look at my pen in your freetime http://codepen.io/bishoy-adel2017/pen/dNJqML and maybe tell me what can I do to get it right (every time) maybe even direct me to some good bootstrap grid lessons or layout tools in general. Another problem is with the fixed position header, it covers the content and when I give the content top margin to solve this the navbar links when clicked scroll to about half of the div. Thanks. :slight_smile:
Note: I want to learn how to be comfortable with layout, not just this one time to pass this project.

1 Like
2

Well I can tell you right off the bat, the reason your content is slipping under your header bar is that fixed positioning.
The thing to keep in mind is, as soon as you “fixed” position something, you pull it out of the document’s flow and the space it occupied before doesn’t count any more. Meaning everything underneath it moves up. So you have to account for that missing height and/or width.

I did a bit of searching and the most consistent fix I could find is adding padding to the top of the body that equals the height of the element you’re fixing:

body {
  color: black;
  background-color: rgb(220, 220, 220);
  padding-top: 9.5em;
}

Which is behaving pretty good until you hit about 782px in resolution. I’m messing around with em’s here to give you something a little more responsive then a fixed pixel number for your padding.

2 Likes
3

Thanks a lot Dlyons, I edited it some and added this 9.5em snippet and it is ok now, everything is almost in place but there’s another problem, that is when I click on any of my navbar links about,portfolio or contact it drives me to the middle of the div, I tried everything but nothing seems to work, I guess I’ll try to edit the code some more and see what I should do. Anyway Thanks a lot :smile:

4

One other thing you might want to take a look at is the CSS properties you’ve assigned for your navbar id. Maybe try toying with float:left; on your li tags inside the unordered list, because as of right now they will stack one on top of the other when the layout width drops below 858px.

Take a look at this guide, I have found it to be immensely helpful in getting what feel like “simple” layout results to work properly: http://learnlayout.com :slight_smile:

1 Like
5

Thanks a lot so much PinkPanther901 I was looking for some guide like that because layouts are my problem not only on this project but in general they’re just a pain to me. Thank you :smile:

6

Hey Beshoy!

I don’t know where you are on your portfolio project currently, but I was going through my bookmarks and found this site that might be helpful to you: https://codeplanet.io/how-to-make-a-single-page-website/

Kelly also posted a demo for the tutorial: http://www.adventuresinwebdesign.com/samples/anchors/blog/ and I noticed she used a sort of empty div for a bit of invisible page spacing. You’ll have to inspect the webpage to see it in action. Now she’s using it to keep the nav bar from covering the top of each section, but in theory if you made a invisible buffer big enough, you might be able to have the nav bar in your portfolio stop at a more preferable place. If that makes sense.

I have no idea how to utilize the above along with a responsive design, and the tutorial I linked also uses jQuery to make the transitions from area to area smooth. But it might be something to consider. I’ll have to mess around with it myself since I’m also interested in creating a single-page portfolio site.

And here’s another tutorial I had bookmarked: https://designshack.net/articles/navigation/single-page-sliding-website-layout-fixed-nav/

1 Like
7

Hi dlyons Thanks a lot. I actually finished the project with it being good looking on the laptop but a total wreck on a mobile phone, I fixed it with margins and paddings and so but I couldn’t make it responsive, I actually skipped the smooth scrolling part and made it move between divs when I click on the navbar links. Anyway I submitted the project that way and I finished half the lessons of JavaScript since then. I’m trying to finish the front end dev. or web design as soon as possible so that I can start with back-end dev. which I was interested in in the first place so wish me luck :smiley: Thanks again for the links your help :slight_smile:

1 Like
8

Yeah responsiveness can be super tricky, especially since there’s several ways you can do something. I’m still working on wrapping my brain around the best methods myself.

Glad you got your portfolio submitted though! I’d definitely suggest coming back to it in the future after FCC launches the responsive web design courses. Who knows, something in there might lead you towards perfecting your mobile displays.

Absolutely, good luck on the back-end dev courses! Nothing better then learning something you’re passionate about :smile:

1 Like