Two small bugs: Header de-centers on full-screen, and mobile menu can display a nonexistent page. about inkblot HOT 6 CLOSED

(Oh, it bears mentioning that to check these I temporarily deleted all of my extra CSS, to make sure it wasn't just my alterations causing the problem.)

from inkblot.

Thanks @Victorre. Can you share a screenshot of what you're seeing with the header image? I can't seem to replicate this. You should be able to remove float: none; on .banner, though, as (by default, at least) .banner isn't floated.

For the menu, it's technically working as it should. When a responsive width is set the site menu converts from a ul to a select at the the responsive width to save space on smaller screens. This menu is "dumb," however, in the sense that it just lists out all of the menu items, regardless of their intent on the full site display. I'm not sure there's a great way to get around this one, really; I could alter the walker to check for # URL's and either not render them or forcibly ignore it when they're selected, but I can imagine instances where such URL's would exist in the site nav and still need to be selectable.

from inkblot.

Sure, I've emailed two screenshots to you at your listed address (I couldn't get them to attach to the forum post). One with the CSS fix, one without.

While I was taking the screenshots I discovered that even with the fix it still de-centered when the window was made even more large than I must have tested. I was able to solve that by reducing the size to 80%, so there seems to be a direct connection between the percentage by which the image is reduced and how big my browser window can get before it de-centers.

The float, as you pointed out, actually has no effect, so I removed it without consequence.

from inkblot.

I forgot to mention, in case it's relevant, that the error occurs in both Firefox and Safari. I just checked and my versions are up to date. My display dimensions (according to an online checker) are 20 x 11.3, with a resolution of 1920 x 1080.

from inkblot.

Have you tried adding text-align: center; to .banner, like:

.banner {
    text-align: center;
}

You should be able to remove the other styles and just use that to keep the banner image centered at any resolution.

from inkblot.

Cool, that worked. Thanks.

from inkblot.