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

5
  • We do not support zooming in / out in our design (text only or otherwise).
    – Oded
    Jun 1, 2016 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 …) Jun 1, 2016 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, 2016 at 11:40
  • @Oded I'm fine with slow going. Better than no going at all. Keep up the good work. Jun 1, 2016 at 15:43
  • @Oded I'm seeing the same broken layout, even without zooming the text. See my screenshot below. Any ideas? Aug 3, 2016 at 23:16

2 Answers 2

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.)

3
  • 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, 2016 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.) Jun 1, 2016 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, 2016 at 12:58
0

I'm seeing this behaviour, even without zooming!

broken layout

Firefox 47.0.1.

2
  • 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, 2016 at 8:58
  • @Oded I'm on Firefox 48.0 on Linux. Aug 20, 2016 at 4:37

You must log in to answer this question.

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