Dan Marino Tribute, would appreciate any feedback

Dan Marino Tribute, would appreciate any feedback
0

#1

#2

The images are completely out of proportion, especially on mobile


#3

I thought the img responsive would fix that, i didn’t even think to check what it looked like on mobile


#4

You are also missing the point of codepen. It has 3 windows for html, css, and javascript. All your code is in the html window. Also, in codepen you put all the head information like stylesheets in settings not the editor.

The image-responsive class is not working, because you are overriding it with picturesetting class (```<img src="…" class=“img-responsive overrriding-clase”). That will not work, instead nest the image-rsponsive in a div that has the correct size for it too work properly.

<div class="row">
      <div class="col-xs-3">
        <div class="picturesetting">
          <img class="img-responsive" src="http://static4.businessinsider.com/image/538d0a51ecad04440c21f67c/dan-marino-is-suing-the-nfl-over-concussions.jpg">
        </div>
      </div>
      <div class="col-xs-3">
        <div class="picturesetting">
          <img class="img-responsive picturesetting" src="http://images.lpcdn.ca/641x427/201406/02/862542-dan-marino-1999.jpg">
        </div>
       
      </div>
      <div class="col-xs-3">
        <div class="picturesetting">
          <img class="img-responsive picturesetting" src="https://specsrugssausagerolls.files.wordpress.com/2013/10/ace-ventura-dan-marino.png">
        </div>        
      </div>
      <div class="col-xs-3">
        <div class="picturesetting">
          <img class="img-responsice picturesetting" src="http://images.sportsworldreport.com/data/images/full/6522/dan-marino.jpg?w=640">
        </div>        
      </div>
    </div>

Example

Also, if you would like to crop images not scale them with bootstrap, I would recommend looking at Cloudinary, a cloud hosting service that has cool image transformation and face-cropping tools!


#5

Your site is a good first attempt. It just needs a little polishing. For the images, I would remove the picturesetting class. With the img-responsive, you are already making it fit the box it is in. Also, put each image in its own div like IsaacAbrahamson suggested.


#6

#7

What I was trying to do and failed to do was get all of the pictures to be the same size, would it have been better to edit the pictures beforehand, and then bring them in or to do it the way I did ?


#8

You can get those equal heights easy. You already have the images with the class img-responsive, so in your CSS just do this:

.img-responsive{
  height:100px;
}

CSS is smart enough to proportion your images correctly.


#9

Looks like you got the picture business sorted out. Another helpful choice might be to place a lighter background behind your text (i.e. put it in a div with a different background color than the body).