Coders who know Bootstrap 3, need help with Portfolio Page project

1

I have been stuck on my Portfolio project for a week and would appreciate anybody who knows BS3 to look at my codepen link https://codepen.io/CodeItLikeYaOwnIt/pen/MbPOmY

  1. The first problem I am experiencing is that as you scroll down the page, in which I have is that the background images of PAGE 2 AND PAGE 4 are not lining up width-wise with PAGE 1 AND PAGE 3’s background images. and PAGE 2 and PAGE 4’s height are going into PAGE 1 and 3.

  2. Sizing screen below .lg, the background images do not stay centered even though they cover screen. Had to use background-size: contain; on just page 1 because COVER made it disappear.

  3. Below .md, all things go bad. Some buttons are too small for text on them. There’s Vertical space between backgrounds. Button group buttons take up entire width of screen (past container).

Any help and explanations would be greatly appreciated. I am totally into coding and have tried everything I can of on my own and still scratching my head. my email is jeff.sodalicious@gmail.com

Thank you so much!

2

Okay, bootstrap is a crutch. I started with it and within 2 days of pro development I ditched it.

Top image
Width: 100%;

background mountain lower on page.
Url: url;
Display: cover;

You can also flexbox (broken on older browsers but only like 3 years or older)

3

in your code you missed couple of closing tag .
there should be the equal number of a closing tag </div> as opening tag <div>

4

Click the action arrow of the css section and select “Tidy HTML” and then maximize it.
Then you should be able to fix errors, I hope.

You can also run HTML Tidy (analyze?) to see what kind of errors it has.

5

Try applying multiple grid classes to divs. As col-sm will apply to only small screen size, col-md to only medium screen size and so on. Like this: <div class="col-md-4 col-sm-4 col-lg-4">

6

Thanks for the good advice everybody. I took your tips and hacked away for a few hours today and came out with this. I read that min px width for browser testing is 320px. When I went that small, the xs columns pushed the buttons farther down the page until they were on the next page (because I didn’t know how to space out elements on the page except to use margin-top. So in xs and sm screens it probably looks fine, but I am guessing the up/down nav links (buttons) look too close to the element above them.But on my Iphone, everything looks to small in portrait, on landscape it looks good. I tried cross-browser testing, but I am not sure which devices to test and not sure the features on the app in general.

I learned some very important lessons…

  1. ALWAYS build it mobile FIRST. I knew you are supposed to but started this project on my laptop and didn’t think to minimize the screen first and then build up from there. Rookie mistake.

  2. In this game, you really only learn by doing.

  3. Persistence and a refusal to give-up pays off. I’ve worked at this project for probably a week and a half and had to figure it out on my own. But the payoff of creating something awesome (even if it is very elementary) is a wonderful feeling.

If anybody has any suggestions on best practices and how to deal with things I had difficulty with i.e. vertical spacing on page between elements, easiest way to run cross-browser test (maybe I don’t need it with Bootstrap?), Is 320px really the min-width to start building a page? If so, how to make things bigger so people don’t have to go to landscape on smaller screens. Maybe there is a way that elements can stack even more. I put the media query for min-width 320px in my css, although I don’t think it’s necessary. I’m not sure. Any advice on spacing elements as I scale up because they start looking too close together and I don;'t think I’m supposed to be changing margin-top for each col size. I don’t even think you can. So this is a best practice issue.

I will also be checking out other frameworks (flexbox and Foundation). Thank again and I look forward to your comments, suggestions, and advice.

here’s my portfolio page. I still want to tweak it for spacing and figure out how to change the hover color on top. https://codepen.io/CodeItLikeYaOwnIt/pen/MbPOmY

1 Like
7

Actually Bootstrap will take in consideration the “lower” declaration as default.
So declaring:
col-md-12 col-sm-12 col-xs-12
could be simply written as:
col-xs-12 → render the full 12 column on all screen-width, from xs to lg.

Differentiating make sense if you want different layouts for different screen sizes as:
col-md-6 col-xs-12 → this two columns will de side to side from md to lg
col-md-6 col-xs-12 → but will be one on top of the other for sm and xs.

hope it makes sense :slight_smile:
Source: official doc

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

8

I gotta say I’m in the same boat as you. I’ve been having issues with making my site actually look…well…good lol. Looking at what you went through gives me more confidence . Your site IMO looks great. Hopefully I’ll get mine figured out too and ill be all the beter for having to struggle a bit.