Help needed on my tribute page : Diana Nyad

Code Feedback
1

Hello fellow campers …
Could you please give some feedback on my tribute page ( http://codepen.io/scodek/full/wzakKV/ ) ? I specially want to know about my image placing (on the white div) . I want to make it center justified. that is, I want some more margin around. When I am giving a 10px margin the image is getting bigger on the right side than its parental div. Currently I manage it with passing a css class to the img tag.
.img-edit{
height:80%;
width:99%;
margin:2px;
}

But I am not satisfied with it as if you see minutely you will find there is more space on the right side than on the left. I will be very grateful if you help me on this and give an overall feedback.

2

Replace margin with padding.

.img-edit {
    height: 80%;
    width: 99%;
    padding: 10px;
}

Your page looks good and has a clean layout.
One suggestion… make the h5 “A story of extra-ordinary passion and perseverance” element a little bit bigger, make it h3 or something, display fonts look better with bigger font sizes.

3

Replace for this:

.img-edit {
height: 80%;
width: 100%;
padding: 10px;
}

5

Thank you …width:100% made it look more better.

6

oops I didn’t notice that the width was 99% :smile:

7

You’re welcome. :thumbsup:

8

Hahaha don’t worry anyone happens.

10

Hi …

I am still trying to improve my tribute page ( http://codepen.io/scodek/pen/wzakKV/ ) to learn some more tweaks. I added a glyphicon symbol of pencil before “Created By Scodec”. I want the pencil positioned exactly above the “C” of “Created By Scodec”. I made it by putting the pencil and the “Created By Scodec” in two consecutive bootstrap rows as below,
`




Created By Scodec
`

But there is still a gap between the pencil head and the “C”. I thus wanted to know if it can be done in some better way or not ? Any help is much appreciated.

11

You can just add the span in the same div with the “Created by Scodec” div and position it absolutely.

<div class="col-xs-12 text-right">
   <span class="glyphicon glyphicon-pencil icon-above"></span>
   Created By <strong>Scodec</strong>
</div>

CSS for the span (add another class and target it via this class)

span.icon-above {
    position: absolute;
    top: -14px;
}
12

Hello thechanchanman,

Thanks a lottttttt . This worked like a charm !!! I also learned the usage of top which I never knew. Thanks again.