search

mobi-css / mobi.css

A lightweight, scalable, mobile-first CSS framework
http://getmobicss.com/
MIT License
2.34k stars 145 forks source link

no longer centered #28

Closed gjtyler closed 7 years ago

gjtyler commented 7 years ago

I know the main purpose of this css file is for mobile and that's why I started using it. However, with the new alpha releases, my web site is no longer centered in the browser window.

I now have a large right margin on my desktop and a small right margin on my mobile phone. I would like no margin on my mobile phone and centered on my desktop.

Let me know if you think I am using this wrong.

xcatliu commented 7 years ago

Hi @gjtyler

Sorry to confuse you.

Because of some reason, I removed display:flex of <body>, so now you need to add a wrapper <div class="flex-center"> as the parent element of <div class="container">

Related issue: #19 #20

Breaking release: v1.0.0-alpha.2

Document: http://getmobicss.com/#layout

Please tell me how you think about this change.

I'll try to release 1.0.0 in the end of September, after that there will be no more breaking changes.

<body>
  <div class="flex-center">
    <div class="container">
      <h1>Mobi.css</h1>
    </div>
  </div>
</body>

You may want to say "Oh that's too complicated! Why should I need to add two <div>s to achieve a simple container?"

Actually, flex-center is used as a wrapper to ensure container aligns to the center of the screen. So if you don't add this wrapper, mobile users will not feel any difference.

Also, you can add flex-center to <body> and it will work, too. However, that is not recommended. Even though you don't append any other elements to <body>, third-party libraries may do so. It might be hard for them to set their position in a flexbox.

What if we want to add a sidebar for the desktop version of your website, useful to show some additional, non-mobile messages, such as Scan to view on mobile or Go to top)? Here is a solution:

<body>
  <div class="flex-center">
    <div class="container">
      <h1>Mobi.css</h1>
    </div>
    <div class="hide-on-mobile" style="padding:0 30px;">
      <p>Scan to view on mobile</p>
      <img src="path/to/qrcode.png"/>
    </div>
  </div>
</body>

sleazebreeze:

Now that flexbox is widely supported, I don't really see a huge reason to bother with a framework like this. Bootstrap and other frameworks had a reason to exist several years ago; now I just don't get it. > The main draw for me and my team was the consistent row and column layouts. Also, the container-side thing is baffling. Why is that part of the framework? It seems like such a narrow focus. What kind of content is never visible on mobile? Why does it have to be on the side?

xcatliu:

Thanks for your feedback. Actually Bootstrap v4 provides an opinion to use flex box instead of the traditional grid. http://v4-alpha.getbootstrap.com/getting-started/flexbox/ I would say your suggestion is good. I don't have a convincing reason that container-side being a part of the framework. I'll consider to remove it. What kind of content is never visible on mobile? Scan the QRCode to view on mobile and Go to top is a kind of this content. Why does it have to be on the side? I think it's a good design to guide people to view on mobile. Or where do you think it can be? Thanks!

xcatliu commented 7 years ago

I now have a large right margin on my desktop and a small right margin on my mobile phone.

Why there is a small right margin on your mobile phone? It should work even if you don't add a wrapper <div class="flex-center">

Please provide me some code then I can figure out what is the problem.

Thanks!