Carl Sagan - Tribute Page - Feedback Pls!

Carl Sagan - Tribute Page - Feedback Pls!
0

#1

Hey all-

Would appreciate feedback on my tribute page assignment. https://codepen.io/Ottocedeno/full/NjQKYm

Had some issues with responsiveness on mobile. Not quite sure why it’s not working. Would specifically love any pointers to get this to load better on mobile, (preferably with bootstrap).

Thanks in advance!


#2

Great background choice. Very sharp images. Like the use of transparencies.
Ther are some who may not know who Carl Sagan is. Why not tell us something about his career, his theories, his education, etc.

When using bootstrap columns <div class="col-md-6"> you nee to have the column divs need to be nested within a <div class="row">.

In the html settings there is a panel for “Head Stuff”. I would suggest including this.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

If you feel you need more info on bootstrap and having your page more mobile friendy check these out.
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

You have a great start.


#3

Thank you so much for taking the time to offer feedback and pointers.

The three lines of code you suggest to add in the “head”, would you elaborate a bit more as to their function?

The bootstrap links and vids are a home run, super helpful!

Thank you!


#4

First line determines a character set used for the page.
character_set Specifies the character encoding for the HTML document.
Common values:

UTF-8 - Character encoding for Unicode
ISO-8859-1 - Character encoding for the Latin alphabet

In theory, any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it.

To view all available character encodings, look at IANA character sets.

Second line is for support of certain versions of Internet Explorer.
Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE 9 or IE 8, then I would recommend using the tag. If you only support the latest browsers (IE 11 and/or Edge) then I would consider dropping this tag altogether.

Third line The viewport meta element is what turns a regular website page into a responsive page …<meta name="viewport" content="width=device-width,initial-scale=1">.
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
Hope this clears this up for you.
Glad I could help you out.


#5

Good stuff. Makes sense. Your info + taking my time and reading Bootstraps documentation on grid system and image responsive classes = Ah ha! moment. Going to revamp this code over the weekend and improve! Thanks again bud.


#6

Coding can be frustrating at times, but it can also be very rewarding.
When you get that Ah ha! moment you then have the confidence to take things to the next step.
Happy coding :relaxed: