Tribute Page: Christopher Hitchens / Need feedback

Tribute Page: Christopher Hitchens / Need feedback
0

#1

Feedback very welcome and some help.

1.In full view the bulletin points come out to the right of the picture which is what i was going for, but when you run the pen or resize the window it pops under the picture which i dont want. Any ideas?

Second thing is aligning the header and wells properly

Any help and feedback greatly appreciated .


#2

Hi there,

I was able to sort out the width problem. Rather than go into a lot of detail, I just forked your pen with my changes:

http://codepen.io/PortableStick/pen/yJOKdz

A lot of the fixes are at about line 8. You want everything in that bio section to be inside of a well, so I wrapped it all in another div. As for the list items dropping below the picture, it was a simple matter of changing the col-sm-# classes to col-xs-#. The ‘xs’ means that the column rule starts at the smallest width, which is about mobile size, while ‘sm’ is a bit larger. Because you hadn’t defined a rule for the smaller size, the browser went with the default behavior.

There were a few other issues to note for future projects:

  • It’s generally not a good idea to nest container or container-fluid classes. You can have as many as you want in a project, and you can sometimes nest a container inside a container-fluid, but it’s best to avoid until you know exactly what you’re going to get out of it. The problem is that it starts messing with your padding.

  • Stay far away from inline styles. All of your style declarations should be in your stylesheet so it’s easy to read and to think about.

  • There are buttons in the upper right side of each editor window, ‘Tidy’. You had a lot of extra white space in there which can make it hard to read, but it’s difficult to fix that. The ‘tidy’ buttons do most of the work for you. If it’s easier to read, it’s easier to catch bugs!

Congrats on your first project!


#3

Came here for the subject matter! Looks good also! I resized it to a narrow width and the list jumped under the picture, which i personally think is actually quite appropriate.

Not sure what you mean by aligning the header and wells. You just want them to have the same exact widths? I haven’t looked too deeply into it, but my suspicion is to blame padding or margins. The box model can be tricky.


#4

Thanks for all the help, all those points are appreciated, i have a bad habit of making inline styles, i think its because the only css course i took in school was very beginner and they only taught inline styles.


#5

Thanks for that, yeah i can see what you mean it works and looks nice when it jumps down, because it was not what i was going for initially i could not see it working until you pointed it out.