This is awesome #ripharambe
I really loved the design and the colors.
My only suggestions are:
- Don’t justify the text for small screens (phone). Large gaps are forming in the text using justify on a small screen.
- The font size is a bit small for large screens.
I really loved your work!
So, you had some problems on boolstrap too with the tribute page? I see your page and noticed that you used bootstrap col-classes AND @media because the first ones didn’t work… Actually, these methods are equivalent, so in real project you will use (or not, at your choice) Bootstrap to avoid using media queries and do things faster. It’s really strange that they don’t work on that platform… if you have solved in the while, please let me know!
Thanks! And your’s really a good work
If I remember well, I put that text justified exactly for that because the normal alignment makes the paragraphs look like a graph. But now that you mention it, it does look strange and it’s harder to read on a very small resolution.
About the font, I was starting back then so I used pixels. Right now I sometimes use vw + some calculations for it for it to scale.
I think it was because of the margins. The bootstrap classes do resize the containers after x width (it’s a fixed amount) but things were looking a bit strange a few pixels before it resized so I used the media queries to make that adjustment when it reached that ‘look weird point’. I also used it to hide the margins when the screen was too small.
Thanks for the feedback!
Nice job guys. Kindly check this link for my own tribute page. Your comments and contributions will mean a lot to me. Thanks.
You can make the image responsive by adding the ‘img-responsive’ class to the image tag (it’s from bootstrap, it will scale it down if you have a smaller screen size/window).
You can also put a custom font. Check google fonts, they have a ton of free fonts. Use with the tag in html or @import inside the css files, no downloads needed!
Also, as @cecilebertin said, justified text looks a bit strange if the screen gets too small. Change it and see if you like it better.
Hi guys, just designed a simple tribute page . Please view and drop your comments. `my tribute page
Thanks in Advance`
Hi all, my very first experience of coding and this is what I have produced as a tribute page (subject selected by my two sons!)… Would love any suggestions for how I could have made the code cleaner, better, more functional etc.!
hey there good job on the tribute page! Here are a few ideas that might make the page more aesthetically appealing. The header text could be centered and could be followed with a sentence long phrase/sub-title right below the header [ex:
Great businessman and The pics on my comp are so large that i can’t see the whole image easily, try to make the images smaller or have a ‘responsive web design.’ It would be cool to be able to see the whole image and also the start of the lower text as well. Maybe the font could be a bit brighter too, it is kind of hard to read the text because it is a darker yellow and kind of blends right in with background. I like the bottom where is shows his stats. Looks good bro, these are just some ideas for the future. keep coding!
the least loved leader
of the lost land
I would like to have some feedback on my tribute page, any constructive, ideas or improvement is always welcome!
Tribute Page - Steve Jobs
Hi guys! It’s haven’t logged in for a while.
They all look really nice. Just maybe a few changes
@toles04 Maybe center the picture and reduce the indentation when the screen gets smaller. You can use that bootstrap class to center or that css width + margin auto combo for the image, and there is a property for that list indentation that you can use with a media query.
@PaulNewman-M add that img-responsive class so the image shrinks with the screen and maybe use another font for the large block of text so it’s easier to read.
@maxbevans try using percentages for the margins so it adapts when you change screen sizes and it doesn’t take up so much space. You can use it on the height and widths of the divs too so text doesn’t overflow. Later you can check the twitter bootstrap classes that kinda does the same thing by just adding one extra word. There are more options but these usually solve most of the cases. Also, the title is very small and its almost the same color as the background.
@JorneM same as @toles04 with the indentation and maybe set a minimum width because the title font is too large for small screens. You could also set the font size to something other than pixels so the font scales depending on the screen size. Usually using a fixed percentage (or other relative units) will give you some problems because then the object, in this case the font, ends up either too big or too small when resizing. Because of this you can use a function called calc. There you can set some upper/lower limits to this size. Google it, it has a formula. It is a bit confusing at the beginning because you know… math is like that.
Thanks for the comment, but i didn’t quite get the message. can you rephrase please.
Thank you for the valuable feedback on my tribute page!
@aaminu Oops, I shrunk the screen and assumed those paragraphs where <li> items. Those margins made them look like unordered lists xD
Try making the window smaller. After you do that you will see that the text has a lot of margin on the left side and it’s a bit hard to read. You can change the margin units from pixels to percentages and it will scale with the window. You can also see that the text will overflow. For that you can either make the font size scale too (with % or other relative units) and/or set the container’s overflow property to hidden.
Not bad. I would suggest a couple things.
1- Add some pictures to the page.
2- Add more links, such as a page where you got some info on Harambe. You could also add these as footnotes.
If you need a site to store your pictures so you can display them on your page, try http://cloudinary.com/.