Tribute page. Recreated. Please Review

Code Feedback
1

link
Here is my tribute page. Any suggestions are most welcome.

2

Let’s start with number of columns in Bootstrap. Maximum is 12 not 14.

If you code in Codepen, all of the css libraries can be implemented in settings.
You’ll get more organized structure then.
Put all styles in css file. It’s a good practice to keep different files separately, especially if you’ve already started a css. Don’t mix part of css with html.

I don’t think you need margin of 100px for classes align-left and align-right on mobile. It looks much better without them.

Make sure that you add img-responsive class to all of your images.

You can style your paragraphs a bit more, now they seem to be too long on desktop. You can achieve it by giving them a class of col-… -… from Bootstrap.

Don’t use br to achieve padding or margins. It can bite you later.

Hope it helps.

1 Like
3

Yes it will help. It’s a pleasure to learn from experienced people like you. As we beginners can’t go so deeply into the code. Thank you.

4

Its good to see tribute page of “The god of cricket”. It is good for starter. But images look bit odd. Use img-responsive as @ewathedoer said.

5

but it does not work for img-responsive.

6

Instead of using your own class and making modifications, add bootstrap classes like “.img” “.img-responsive”. You can modify those classes in CSS.

1 Like
7

Well what i want is to display the images in well. Just like i did initially. So will i be able to do so by using img-responsive? As i tried now i can’t get the results as previously.

8

Hey there. Great start. Good to see a cricketer tribute page!

all your images have their images stretched by the .imag settings in your css. Anything in your stylesheet will override the bootstrap settings. That’s likely why img-responsive isnt working. A solution for this would be to size by percentage and if your sizes of your images are all different, just scale on width and allow height to auto adjust
eg: .imag{
width:25%;
}

You have a lot of divs in there that don’t seem to achieve much too. A good thing to know is that you can have multiple classes in the one definition so you can replace

with

It cuts down on the clutter (and the

's! and makes it easier to read.

Best of luck, it looks great!,

John

1 Like
9

That’s looking better, the images appear in rows now too. The top image looks to be squashed still. I’d change your css for the top picture. Having witdh and height listed with one fixed and the other a % will lead to image distortion.

.pict{
width:100%
}

Cheers,
john

1 Like