View from 768px to 992px - div w/ id 'navbar' is obscuring div w/ id 'main-content'

[WoollyMammoth1]

This is occurring on Chrome 72 on Windows 10. To fix this you can change the following code:

Change the DOM element "#navbar div.container" from this: @media (min-width: 768px) .container { max-width: 750px; }

To this: @media (min-width: 768px) .container { max-width: 850px; }

[WoollyMammoth1]

[bjones1]

Thanks for reporting (and carefully measuring) this. Obviously, long book titles drive this problem; I've noticed it before as well. We need some nice CSS that will not wrap, but instead hide part of the title IMHO. (The other solution is adjusting the bottom margin, but I like that less.) CSS gurus, what the term for "make this box whatever size is left over horizontally"? Then apply that to the title box, I think.

[WoollyMammoth1]

@bjones1 - I just got back from work and had a chance to look it over on other browsers. A couple suggestions:

1) Your logo, on smaller screens, is off the screen on the left. This is caused by the -15px left-margin that you have on your navbar-header element. You can target the .brand-logo element, for smaller sizes, with: "margin: 4px 15px;", in order to fix this.

2) You will want to hide the page title on smaller screens if you're experiencing a lot of wrapping. It's going to be nearly impossible to prevent this on some devices with the current location of your title. I'd recommend restructuring your site long-term, but until then here's a workaround that should help:

• Use the built in jQuery method .prepend() to target your current title location, create a duplicate of your title, and add it to the main-content element on your pages
• Hide the prepended title on larger device sizes, and show it on smaller sizes. Hide the current title location on smaller sizes, and display it on larger sizes.

This isn't a long term solution but would probably work pretty well until you can get around to restructuring your site.

I'm sure there's a better solution somewhere here, but this is the first thing that comes to my mind.

-Isaac

[WoollyMammoth1]

I should add - I tried changing your text size using viewport percentages. To fit the text into the correct location it has to be too small to be easily readable, which is why I'm recommending the above.

[bjones1]

@bnmnetp, any thoughts on this? I've definitely seen the long titles problem. @WoollyMammoth1, any thoughts on integrating these into the code? I'm guessing this is mostly in https://github.com/RunestoneInteractive/RunestoneComponents/blob/master/runestone/common/css/runestone-custom-sphinx-bootstrap.css.

[WoollyMammoth1]

The simplest fix would be to hide the element on the target screen sizes, this would probably make the most sense for you.

For this particular CSS document (runestone-custom-sphinx-bootstrap.css), I'd recommend a couple things:

Problem: You have CSS Media Queries for various sizes located throughout your page. For example, your @media (max-width: 768px) and @media (min-width: 768px) tags each present themselves twice throughout the document. Solution: I'm not sure if the css for your static site is compiled or not; If your CSS is compiled from several sources you will want to ignore this solution. If not I'd recommend combining those tags for readability - all tags targeting a specific screen size should really be located in a single location, it'll help you debug in the future.

To fix your viewport for the initial issue, the easiest solution I have is just to hide it on certain screen sizes. I believe you can do this by adding the following CSS to the relevant CSS Query:

@media (min-width: 768px) .navbar>.container .navbar-brand { display: none; }

The above will hide the text from screen readers. If you do not want to hide the text from screen readers you can hide it by shifting it off the screen, by adding the following CSS to the relevant CSS Query:

@media (min-width: 768px) .navbar>.container .navbar-brand { position: absolute; left: -999em; width: 1em; overflow: hidden; }

This will prevent your titles from showing at all but still display them to screen-readers.

If you'd like to maintain the title, you will need to move the title from the navbar to your body. To do this you can restructure your site, or alternatively add the jQuery fix that I mentioned farther up in this comment chain.

I would personally just hide the title by moving it off-screen. The jQuery fix would take too much time for what it's worth, in my opinion. Anyone visiting the page is likely to know the subject of discussion anyways.

[bjones1]

The CSS is a mangled wreck, but not dynamically compiled from other places. Simply editing the linked file will do the trick. Combining the @media tags makes sense to me. Also, your first solution (just hide from screen readers) is the best option IMHO as well.

Do you know enough about git/github to turn your ideas in a pull request? If so, that would be very helpful.

Disclaimer: I don't have commit privileges, I'm just a contributor. @bnmnetp is the only person who can actually merge your PR.

[bnmnetp]

Yes, its not pretty. And I would love to clean it up and modernize it... But please keep in mind that this CSS has grown organically through work by many undergrad students who were learning CSS at the time they were creating it. I myself knew next to nothing about this in 2012 when I first discovered bootstrap and started using it in this project.