* Managed to complete the crux of content and bring it out here for review.
_* My padding and grey well doesn’t work properly like Quincy’s page borders and neat structure _ * want to arrange the columns for Videos and Resources to be in the same well or column * Information is in a mess, how do I make this page present properly?
National Day is coming up next Tuesday so I really am excited and nervous to get this tribute page right.
Hi. This is a good tribute page! I like how you are dedicated to building this page. Let me offer these inputs:
You don’t have to put gray borders around your page like the example did. With a lot of information in your page, the borders are already good as they are.
There’s a missing closing </div> at the end of your code.
Give your columns these values:
The one around Milestones with col-sm-8.
The one around Videos with col-sm-4.
The one around Resources with col-sm-4.
Change the class of the <div> around the quote from row to col-xs-12
That should result in the milestone <div> occupying two-thirds of the screen, the videos and resources <div>s neatly stacked on the remaining space to the right, then the quote at the bottom of the page, with no horizontal scroll bar.
Hi there fellow singaporean! National day is on tuesday, looks like you are right on time.
On top of what kevcomedia mentioned, you should consider layouts for smaller devices as well. You can scale the size of the window down and do some testing. You will find that because of the 3 column layout, it is almost unreadable on a mobile phone/tablet.
Just some suggestions on the layout vs device size:
Removed ="well" from the top of my <div> class so that the wordings represent better
Headline made font-size:420% - to highlight tributee, the only way to adjust font size I know
Adjusted Milestone as col-sm-8, Videos as col-sm-4, Resources as col-sm-4
Removed <p class="text-center"> from bottom quote, name of tributee so text doesn’t “float” with weird wrapping during tablet or phone reads. Figured this looks like better typography reads.
Added references to Wikipedia, so I don’t take the credits.
Added another </div>, curious, if I hadn’t put this </div> in what could happen? I didn’t really see a big difference in page preview… maybe I missed something?
Questions:
Is there any other way to “add spaces” between the bullet points, than just adding <p></p> in between all my bullets?
How do I add a quote that is encapsulated at the bottom of the image?
My image looks kinda of small, how do I populate the entire screen or make it stretch to fill the page in combination to using "img-responsive" class declaration?
Font Family changed to “Georgia”. How do we know which font works, is there a list to what codepen makes available? (Assuming that we can’t use CSS and only HTML so calling a font-type doesn’t work here)
Anyway to border my entire page nicely or is it better without borders?
Hello again! I’ll try to answer some of your questions.
You can add something like li {margin-bottom: 10px;} in your CSS to add some space between list items (then remove the empty <p></p>s between).
I don’t know what you mean by this .
You can add, say, width: 90%; to make it larger, but you might start seeing loss of image quality.
Available fonts are what’s available in your local machine. If for some reason this page is viewed in a computer with no Georgia font, the font will be displayed in the browser’s default font (like say, Times New Roman). You can specify alternative fonts like font-family: Georgia, <fallback-font1>, <fallback-font2>, ...;. Better yet, import a font from Google Fonts. There are a lot of fonts to choose from, and you can be sure that your page has the same font everywhere.
No page borders, but that’s just my opinion
About the intelligent grids, you can try the following plugins (I haven’t tried any of these, I only took the links from Bootstrap’s docs):
Made the changes, you’re a genius thatli {margin-bottom: 10px;} works. I’ve removed all the <p></p>code looks neater right now.
Also, I see the reason why you recommended 90% as opposed to 95% or 100%, because during the screen shrink to a phone, the image appears more aligned to the left-most and right-most columns borders on the same line…
Took me awhile to figure out how the stylesheet API calls from Google Fonts works but I’m glad I did. I didn’t remember declare the class i made “stylesheet” in the <div> portion off the container-fluid . I’m assuming this is how you’d do it?
Yes, no borders. I decided not to do it, I just noticed with wells, it could enhance the radius of the image corners to be slightly more rounded
Hey, good call on that grid plugin, first time I’ve seen this feature made available in bootstrap. This is used more and more frequently probably because it encourages a certain “curiousity” and faster web loading time. Your thoughts?
If you were local, we could meet up. wanna buy you and Ian a coffee!
Well in general, margins/padding between the word “Milestones” and the picture above it for example. It just feels a little congested. Margins inbetween bullets looks fine to me. BUt like i said earlier, its more of a personal preference.
Not sure what you mean by the typography violating project rules though. Thats a legit way to load up fonts.
.
, but I’m not in Singapore.
