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.
