www.webdeveloper.com
Results 1 to 2 of 2

Thread: Smooth margin-size change between break-points?

Hybrid View

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    264

    Exclamation Smooth margin-size change between break-points?

    I'm trying to center a jQuery Mobile page with a panel and "margin: 0 auto" doesn't work, so here is what I have:

    HTML Code:
    <style type="text/css">
    @media screen and (min-width:65em){
    	div[data-role="panel"], .ui-page{
    		margin-left:2.5em;
    	}
    }
    </style>
    I have a script that outputs about a dozen of these to add another 2.5em for every 5em of screen width over the initial 60em (for large screens) ...

    It works, but the problem is that it's messy and clunky. It has a shutter/jolt every 5em of page transition width, which looks terrible when a window is being re-sized manually.

    Is there a more fluid way to do this? Or some sort of "smooth" animation that can widen the margins by 2.5em at each break-point or dynamically from the initial break-point? Also, I cannot have a percentage here as it would not ignore the initial 60em's of width and it would not center the content well.

    Any advice is greatly appreciated, thanks in advance!

  2. #2
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    264
    Quote Originally Posted by amandaNHT View Post
    I'm trying to center a jQuery Mobile page with a panel and "margin: 0 auto" doesn't work
    The tricky part about this is that the panel (div[data-role="panel"]) and the jQuery Mobile page (.ui-page) both have to have the margin added, otherwise they overlap.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles