A Tribute to Remus Lupin: Feedback appreciated!

A Tribute to Remus Lupin: Feedback appreciated!
0

#1

Hey everyone!

Just finished my tribute page. I would love feedback on anything and everything! I have never coded before starting FCC, so I have a lot to learn!

Also, I have a few questions that came up while creating my page that I couldn’t find the answers to via Google searches. You’ll see these as comments in my code:

  1. I used offset columns in the Boostrap grid as a way to center my divs, but I noticed that sometimes, the next divs in my code would fill in the offset columns if I didn’t give them a row or container. Why did this happen/how exactly do offset columns work?

  2. Is it normal to make font size responsive or fixed for documents like this, considering different screen sizes exist?

  3. I spent a long time fighting with the thumbnail border around my image (the left and right padding was very thick, for some reason) until I finally assigned a container class to the div that the image is in, and the thumbnail padding became normal. Can anyone explain to me why that worked? The online descriptions of “container” do not satisfy me.

  4. Is there anyway to know/test what your page will look like for different screen sizes? I found that my page looked perfect on my 10" screen, but had some style errors on my husband’s 24" screen. I might not always have access to multiple screen sizes for testing, though.

  5. This one has to do with containers again. Even though I used the offset columns to center the div that the quote was in, and to center the h3 element itself, the actual quote would not get centered until I used the container class for the containing div (the border was always centered relative to the page). Can anyone explain this?

  6. Not related to my code: how to you get the code pen preview to appear here? Simply pasting the HTML doesn’t work for me.

Thank you for all of your help! :smile:

See the Pen FCC Tribute Site by Haley Mnatzaganian (@haleymnatz) on CodePen.


#2

Good job on your tribute page!!

I don’t know about questions 1-5 as Im still a beginner myself, but I struggled with getting my CodePen project to embed in my posts as well. I found out by accident that the trick is to copy and paste the link to the full screen version of your pen. That should work.


#3

Thanks for the feedback! I’ll have to give that a shot.


#4

In case anyone comes across this post, here are the answers to some of my questions that I got from my web developer friend:

I noticed that sometimes, the next divs in my code would fill in the offset columns if I didn’t give them a row or container. Why did this happen/how exactly do offset columns work?

Bootstrap is intended to lay out elements in a 12-column grid. This means that
classes assigned to the “column” divs inside of each “row” div should
add up to 12. So if you wanted to create a row with three equal columns,
you would have one “row” div with three “col-md-4” divs inside of it.
If you wanted the middle column to be twice as wide as the two outer
columns, you would have a “col-md-3” div, then a “col-md-6” div, then
another “col-md-3” div. (As an aside, the “col-xs”, “col-sm”, etc.
prefixes control how wide the particular column is at different
breakpoints in viewport width.)

What it looks like you’ve done is just put one column in your row with classes
"col-xs-8 col-xs-offset-2". The “offset” class has the effect of
applying a left margin to your div that is equal in width to what a
"col-xs-2" div would be. However it only applies a left margin, not a
right margin, so there is still some unoccupied space to the right of
your “col-xs-8” which will get taken up by the next div, assuming it’s
inside of the same “row” container div.

Now, I should explain that a div is, by default, a block-level element, so the
normal behavior is that subsequent elements would not be placed inline
with it (that is, the next element would typically not be on the
same line, or in the same row, as a block-level element). However,
Bootstrap’s “col-” classes have a “float: left;” attribute applied to
them which results in a slightly different behavior. When an element is
"floated," it is taken out of the normal flow of the document, and other
elements “wrap” around it. As an example of when you might want something
like this to happen, think about a newspaper article which has long
paragraphs and lots of text, but there is an image off to the left in
the middle of the article, and the text wraps around the image to the
right. In this case, the image is “floated” to the left, so it’s taken
out of the flow of the document and doesn’t create an awkward space
between the paragraphs of text.

In your case, however, you don’t want subsequent elements wrapping around your floated “col-xs-8” div. The
reason why putting the next element in a new “container” solved your
problem is because Bootstrap’s “container” class has an attribute
"clear: both;" applied to it. This rule disallows elements from being
floated to both the right and the left of your “container” div. (Check
out this documentation for some further explanation of the “clear"
rule: <a href=” https://developer.mozilla.org/en-US/docs/Web/CSS/clear>)

Is it normal to make font size responsive or fixed for documents like this, considering different screen sizes exist?

It depends on how big the font is and how it’s being used. I find that
typically the main body font is a fixed size. Even though your phone’s
screen is a lot smaller than your desktop screen, you still don’t want
to be squinting at it to ready teeny tiny text. However, if it’s a
headline font that is quite large on desktop, it may become totally
illegible on a phone if it is so large that you can’t even fit a whole
word on one line. In this case, you probably need to make the font
smaller for mobile devices. Basically, it’s just a matter of using your
judgment and fiddling with things until it looks right and seems easy to
read.

Is there anyway to know/test what your page will look like for different screen sizes?

I don’t know which browser you use, but I prefer Chrome’s developer tools
so I’ll talk about those. In Chrome, you can right-click and click
"Inspect" on any page, which brings up the developer console. You can
use this to analyze the CSS and HTML elements on a page, and also you
can use it to test out some HTML/CSS changes on the fly (basically like
Codepen, but without having to use Codepen). Anyway, in Chrome’s
developer console, in the upper left hand corner there is an icon that
looks like a an iPhone in front of a tablet. Click on that and it turns
on “Responsive” mode. Along the top there are various width breakpoints
you can click on, or you can drag and drop the bar on the right to make
the viewport wider or narrower. There’s also a dropdown list at the top
so that you can test out what the page would look like on specific
devices. At the top there is also a “zoom” level you can control which
can be useful if you want to see what it would look like on a larger
screen. For testing a screen that’s larger than your current screen,
though, it is probably more ideal to have a large monitor to try it on,
as things are going to get pretty tiny if you zoom out too much.