MediaWiki talk:Mobile.css

CSS rules here do not make sense for mobile

A lot of these rules in here don't seem to make sense... are you sure they are needed ( I assume they have been copy and pasted from Common.css?!) ? If so it would be good to document why they are here.

To start with: .bottom-box-left and .bottom-box-right have widths set at 52% - this is far too small for devices which have 320px screens. May I suggest these are wrapped in a media query or made to me width 100% and float dropped? Float based layouts do not work well at all on mobile....! Jdlrobson (talk) 23:23, 3 May 2013 (UTC)

There's a bug that prevents this from being used at all. I suppose we should just blank it for now. - Mark (talk) 07:14, 4 May 2013 (UTC)

Template:Pagebanner on mobile

We recently changed a few things on MobileFrontend (the extension that powers the mobile view) and one of the side effects is that the page banner on mobile will now load in the background despite the fact it is not visible on mobile. As a result you might as well show it. I have had a fiddle around with the css and have this proposed CSS below that becomes active when you remove the class nomobile on the Template:topbanner Is Template:Pagebanner enabled on all pages? If so I wonder if putting this CSS here would be worthwhile... eagerly await your thoughts!

  #section_0 {
    opacity: 0.9;
    background: #F3F3F3;
  }
  #page-actions {
    background-color: #FFF;
    opacity: 0.8;
  }

  .topbanner {
    overflow: hidden;
    height: 200px !important;
    margin-left: -16px;
    position: relative;
    padding-bottom: 20px;
    margin-right: -16px;
    margin-top: -112px;
    z-index: -1;
  }
  .topbanner img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none !important;
    height: 200px !important;
    margin-left: -50%;
  }
  /* tablets */
  @media all and ( min-width: 768px ) {
    .topbanner img {
      margin-left: 0;
    }
  }

Output:

Jdlrobson (talk) 19:24, 17 November 2013 (UTC)

@Jdlrobson:, I put in the CSS code, which looks OK, but I tested it in-browser and the buttons to edit and watchlist don't work. Any ideas where the problem is? -- torty3 (talk) 12:55, 6 December 2013 (UTC)

@torty3: sorry I only just saw this - not sure why I didnt get a mail notification. I'd love go debug this and get to the bottom of the problem. What time zone are you on? On a more general note I'd love to work closer with the community to make sure we meet Wikivoyage needs! Jdlrobson (talk)

Seems z-index: 2; position:relative' on #page-actions would help here. Then simply drop nomobile class from page banners and voila! Beautiful! I'd add it myself but I don't have permission on the wiki @Torty3:, @MarkJaroski: :) Jdlrobson (talk) 00:32, 21 December 2013 (UTC)

Have one of you already done this? @Torty3:, @Jdlrobson:. -- Mark (talk) 17:34, 26 January 2014 (UTC)

@MarkJaroski nope it hasn't happened yet. Keen to help in anyway I can! Jdlrobson (talk) 19:32, 26 January 2014 (UTC)

Ping... The mobile site has been frustratingly in a halfway state for some time. I almost added an image to a page thinking it needed one before realising it had a page banner hidden on mobile!! User:MarkJaroski Jdlrobson (talk) 17:42, 31 January 2014 (UTC)

I'm happy to help out, but as I don't have an easy way to test I'd need to know exactly what to change, and there have been a few proposals made above. Can someone clearly spell out what it is that needs to change, and then volunteer to confirm that any change fixes the issues? -- Ryan • (talk) • 17:45, 31 January 2014 (UTC)

I too would be very happy to help out and I'm keen to get this implemented - pagebanners are great! --Nick ^talk 02:17, 5 February 2014 (UTC)

I've implemented the suggestions above, but it doesn't seem to have worked - have I done something wrong? --Nick ^talk 02:27, 5 February 2014 (UTC)

Apologies for the stream of consciousness - it now appears to be working following this edit... --Nick ^talk 02:31, 5 February 2014 (UTC)

I might turn down the opacity of the top section a little as it currently makes it quite tricky to see a large chunk of the banner. --Nick ^talk 02:33, 5 February 2014 (UTC)

After much meddling, I think it's now sorted. --Nick ^talk 03:27, 5 February 2014 (UTC)

And, as a bonus, I've made the banners 'grow' from the right, as that seems to be where most of our images are focussed. --Nick ^talk 03:44, 5 February 2014 (UTC)

Breaking change in next 2 weeks

FYI, a new redesign for tablets is going live soon and they do not seem to be compatible with MediaWiki:Mobile.css The easiest thing would be to wrap your existing styles in media queries that only target mobile devices.

e.g. https://en.m.wikivoyage.org/wiki/Paris?mobileaction=beta (ensure you view this on a desktop browser) Jdlrobson (talk) 16:00, 16 May 2014 (UTC)

Thanks for letting us know about this! --Nick ^talk 17:52, 16 May 2014 (UTC)

I'm afraid I'm not quite following. Is it the redesign that is not compatible with MediaWiki:Mobile.css, or the tablets? And does "mobile devices" in this sense include tablets or not? (I consider tablets mobile.) Powers ^(talk) 00:37, 20 May 2014 (UTC)

We are adding media queries to the mobile site so it looks different on larger screens e.g. desktop browser. It seems to interfere with your page banners. If you add some media queries to Mobile.CSS now it will ensure that the site looks good when the new changes are pushed! Note you can use the .beta class in meantime to restrict the impact. The URL above shows the issue. Jdlrobson (talk) 12:19, 20 May 2014 (UTC)

The page banner stuff looks like a mess in mobile, and even worse on tablets. I would suggest just hiding it for now (display: none;). Kaldari (talk) 05:04, 12 March 2015 (UTC)

.topbanner

Is this class still in use after the introduction of the pagebanner extension? --Andyrom75 (talk) 18:19, 10 September 2016 (UTC)

Doesn't appear to be. Seems to be now wpb-topbanner, so if no-one else comments over the next day or two, I'll remove it. -- WOSlinker (talk) 21:04, 10 September 2016 (UTC)

There's also some .topbanner in MediaWiki:Common.css -- WOSlinker (talk) 21:06, 10 September 2016 (UTC)

WOSlinker, I suppose that both are obsolete because I don't find it neither in the page nor in the script for both mobile and desktop versions. --Andyrom75 (talk) 06:58, 11 September 2016 (UTC)

WOSlinker, do you think that are still necessary of can them be deleted? --Andyrom75 (talk) 07:37, 17 September 2016 (UTC)

I've now removed them. -- WOSlinker (talk) 11:34, 17 September 2016 (UTC)