3

If I increase the font size in my browser, the layout of the front page breaks: The <div class='summary'> containing the post title, tags, etc., which is styled float:left will sometimes slide underneath the block containing various quotes.

This is with Firefox on OS X with the menu item View → Zoom → Zoom Text Only selected.

Screen shot showing broken layout

| |
  • We do not support zooming in / out in our design (text only or otherwise). – Oded Jun 1 '16 at 10:34
  • 4
    @Oded The ability to zoom is important for those of us with less than perfect vision. Fortunately, this bug does not render the site unworkable, only somewhat ugly. So I won't insist*, but for future design tweaks, I think you should at least consider what happens when users zoom. With robust design, it shouldn't be terribly difficult to avoid the sort of mishap we are seeing here. (*Not that I am in a position to insist, anyhow …) – Harald Hanche-Olsen Jun 1 '16 at 11:35
  • I appreciate that - but the basic design we have (which is quite old - about 8 years now) never supported zooming, in that yes, layout can break. The designers are working on it, but this is slow going. – Oded Jun 1 '16 at 11:40
  • @Oded I'm fine with slow going. Better than no going at all. Keep up the good work. – Harald Hanche-Olsen Jun 1 '16 at 15:43
  • @Oded I'm seeing the same broken layout, even without zooming the text. See my screenshot below. Any ideas? – Wilfred Hughes Aug 3 '16 at 23:16
2

If it helps, I have a custom stylesheet for the site which addresses this. I use larger fonts by default (and so experienced the same issue), and I also wanted a wider layout. This stylesheet supports font sizes larger than I use, so it might work nicely for you, pending an official fix. Install the Stylish extension in Firefox to use custom stylesheets.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("emacs.stackexchange.com")
             , domain("meta.emacs.stackexchange.com")
{
    /* Reduce the vertical space around the logo and main tabs */
    #hlogo a {
        top: 0 !important;
    }
    #hmenus {
        top: 20px !important;
    }
    #header {
        height: 85px !important;
    }

    /* Width +140px, with various adjustments to best support larger text */
    .topbar .topbar-wrapper,
    #footer .footerwrap,
    #header {
        width: 1230px !important;
    }
    #content {
        width: 1200px !important;
    }
    #mainbar, .mainbar, .question-summary {
        width: 890px !important;
    }
    .summary {
        width: 765px !important;
    }
    .narrow .summary {
        width: 665px !important;
    }
    .narrow .cp {
        min-width: 191px !important;
    }

    /* Mode Line */
    #footer .footerwrap #footer-menu .top-footer-links {
        padding: 1em !important;
    }
    #footer .footerwrap #footer-menu .top-footer-links > a:first-child:before {
        content: "U:---" !important;
        float: left !important;
        color: rgba(255,255,255,0.5) !important;
        font-family: monospace !important;
    }
    #footer .footerwrap #footer-menu .top-footer-links > a:first-child {
        margin-left: 0.5em !important;
    }
    #footer .footerwrap #footer-menu .top-footer-links :last-child a {
        margin-right: 0 !important;
    }
    .top-footer-links:before {
        content: "" !important;
        float: right !important;
        color: rgba(255,255,255,0.5) !important;
        font-family: monospace !important;
    }
    .top-footer-links:after {
        content: '' !important;
    }

}

(The "Mode Line" tweaks I can kinda blame on myself, as that was my suggestion and CSS, and then I found it looked awkward when the footer menu wrapped over two lines. I hadn't gotten around to suggesting changes for that.)

| |
  • p.s. I also highly recommend the NoSquint extension. Instead of messing with the 'zoom' menu, you can get both kinds of scaling from the key bindings, depending on whether you have just Ctrl, or Ctrl + Shift held down (plus it remembers your settings on a per-site basis!) – phils Jun 1 '16 at 5:33
  • Thanks, that's useful. I do have Stylish installed already. (NoSquint is no longer maintained, but there is a successor, NoSquint Plus. Thanks for the tip.) – Harald Hanche-Olsen Jun 1 '16 at 11:37
  • Good to know about NoSquint Plus, thanks. I've never had any issues with the original, but if it eventually stops working, I'll know where to look! – phils Jun 1 '16 at 12:58
0

I'm seeing this behaviour, even without zooming!

broken layout

Firefox 47.0.1.

| |
  • I can't reproduce the issue at all (FF 47.0.1 and FF 48.0). What operating system are you on (and version)? – Oded Aug 4 '16 at 8:58
  • @Oded I'm on Firefox 48.0 on Linux. – Wilfred Hughes Aug 20 '16 at 4:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .