Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

no longer centered #28

Closed
gjtyler opened this issue Sep 5, 2016 · 2 comments
Closed

no longer centered #28

gjtyler opened this issue Sep 5, 2016 · 2 comments
Labels
question

Comments

@gjtyler
Copy link

gjtyler commented Sep 5, 2016 •
edited by xcatliu

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
Copy link
Member

xcatliu commented Sep 6, 2016 •
edited

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
Copy link
Member

xcatliu commented Sep 6, 2016 •
edited

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!

@xcatliu xcatliu closed this as completed Sep 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gjtyler @xcatliu