Text forum title renders too wide on mobile


(Franz) #1

The Latest / Top / Categories menu is truncated:

(I have no CSS/HTML customizations for mobile, only colors.)

Edit: meta.discourse.org renders fine on the same device.


(Michael Downey) #2

I can’t reproduce this on a Nexus 5 but it has a higher resolution.

The reason appears to be that you are using a text-based “logo” that is too wide, and as such there’s not a room for the Log In, search, and menu buttons, so they move to a second line. If you were able to use a shorter title such as “Appleseed” or maybe an image, this shouldn’t be a problem for you.


(Franz) #3

Good catch @downey, that was it.

I would still consider this a bug, but the workaround is simple enough for now. Thanks!


(Jeff Atwood) #4

I added this to the default mobile styles

// if the logo is text, it can't be too big or small width devices have issues
h2#site-text-logo
{
  max-width: 135px;
  max-height: 1em;
  overflow: hidden;
  padding: 0;
  margin: 8px 0 0 0;
  text-overflow: clip;
  white-space: nowrap;
}

However I am not sure if this is a good approach. (it’s annoying that mobile also doesn’t suppress h1,h2,h3 etc margins/padding by default). What do you think @lid?


(lid) #5

I would actually go with a slightly different approach.

It requires a slight template modification, and one time javascript call.

###Here is the concept in mind:

  1. Add a padder element before the header tag in the template
<div id='padder'></div>
     <header class="d-header">
        <div class="container">
          <div class="contents">
            <div class="row">
              <div class="title span13">
                <a href="/"><img src="<%= (mobile_view? && SiteSetting.mobile_logo_url) || SiteSetting.logo_url %>" alt="<%=SiteSetting.title%>" id="site-logo"></a>
              </div>
            </div>
          </div>
        </div>
      </header>
  1. The first time the header will render we will adjust the padder height to the header height.
$("#padder").height( $("header.d-header").height() );

This is what the changes will achieve.

Testable in console

var padder = $('<div>');
$('header.d-header').before( padder );
padder.height( $('header.d-header') ).height();

ps
The <header> on mobile view (in the site I tested is overflow to the right of the screen
if this is not due to customization then it will need to be fixed otherwise long titles will render outside the screen.


(Jeff Atwood) #6

I don’t think we want the mobile header to be so large though. Two lines is way too much on mobile, particularly on tinyphones like the iPhone 4s.


(lid) #7

So we are talking about 2 possible approaches:

  1. We restrict the title size to enforce a proper header size ( your css take care of that)

  2. We leave the choice to the site owner ( allow them longer title on the expense of less reading area).

Since real estate on mobile devices is expensive. your approach is better.

btw not sure if there are many negative implication on mobile if we suppress all padding and margin for H tags
but there are some areas in the UI the will be affected.

h1,h2,h3,h4,h5,h6 {
padding:0px;
margin:0px;
}

(Jeff Atwood) #8