Tribute page feedback plz

Code Feedback
1

Hey everyone, wanted to post here my first project here and see what everyone thinks. Any comments or feedback would great, positive or negative, I am new to this and want to see how it is all coming together.

Here it is: http://codepen.io/Shazza93/full/BzJppr/

Also if anyone can add on how I can make it mobile responsive, that would be great. Tried adding classes into HTML but the images on the desktop then got distorted.

2

Hi Shiron,

Presumably when you say you want it to be responsive, youā€™d like to have three images across on larger devices, but stack the images on smaller devices? Like large = 3 x 1, small = 1 x 3?

You are on the right track using <div class='row'> and <div class='col-**-##'> (where ** is device width, eg xs, and ## is number of columns, eg 4).

By providing only the col-xs-4 class, you are telling the page to make each image take up 4 columns for every screen screen size from ā€˜xsā€™ up.

What you want to tell the page instead is that for xs devices you want images to take up 12 columns (i.e. the max width of the parent container), and maybe for ā€˜mdā€™ devices and up you want images to take 4 columns. You can put two classes in your html elements simply by separating them with a space:

<div class="class-one class-two">

You may also like to use something like a <div class='container'> to wrap all of your page content in - which is just a bootstrap class for providing a little breathing room around the edge of the page.

Try to implement the responsive columns yourself, but if you get stuck you can peek at the spoiler below!

Spoiler 
<div class="row">
  <div class="col-xs-12 col-md-4">
    <!-- Image stuff -->
  </div>
  <div class="col-xs-12 col-md-4">
    <!-- Image stuff -->
  </div>
  <div class="col-xs-12 col-md-4">
    <!-- Image stuff -->
  </div>
</div>
2 Likes
3

If I am not wrong (I am newbie myself), putting all the contents of body in <div class="container-fluid"> also makes it responsive.

4

HI verv0eren,
Yeah that is exactly what I thought but it kept messing up unless I am making other mistakes ( life of a beginner coder haha)

Thanks a lot JacksonBaters, cleared a lot of stuff for me. I think it is one thing going from the tutorials to another actually doing a project. I couldnā€™t resist the spoilers :frowning: but I understand it ā€¦ so thank you again

1 Like
5

I was once told (or more likely, read somewhere) to use container over container-fluid most of the time. Being a relative beginner myself, I think (but could definitely be wrong) itā€™s because container will allow the contents to have a nice little margin, whereas container-fluid will make the space between your stuff and the edge of the browser nonexistent (as it is in your page right now). Also sometimes different browsers do wonky things with the container-fluid class.

Anyway, ways to make it more responsiveā€“seconding @JacksonBates with the images. You can also add a class of ā€œresponsiveā€ to each image and itā€™ll change the size of the image based on the size of the screen. The Bootstrap documentation also is a great resource, if you ever want to pick through it and stick some stuff in your code and see what happens. :slight_smile: (Youā€™ll quickly find that youā€™re going to be spending a lot of time doing exactly that for pretty much every documentation, haha.)

4 Likes
6

Very nice explanation of the difference between container & container-fluid here in following link:
Container-fluid vs .container