SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Positioning

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning

    Hey,

    Wonder if anyone has any ideas how how this issue can be solved.

    I have a layout like this at present:

    http://codepen.io/rctneil/pen/tkrKC (For full browser demo use http://codepen.io/rctneil/full/tkrKC)

    This works fine on desktop and on the iPad.

    However, I have an item which is a style image which I need to position outside of the header to the right. I have set the following styles on it:

    HTML Code:
      .item
        position: absolute
        right: -113px
        top: 30px
        width: 90px
        height: 90px
        background: transparent url('images/item.svg') no-repeat left top
        background-size: 100% 100%
    However, This works perfectly on a desktop browser as expected but on the iPad it's in the correct place but is still visible when it should not be. The iPad has zoomed out to accomodate the extra wide elements.

    I have tried several meta viewports widths and scales and nothing seems able to solve it.

    I basically want the viewport to ignore that item so wide browsers will see it and narrower ones will not due to this being purely decorative. I also cannot put it as part of the background image for other reasons.

    Neil

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Neil,

    Depending on the element I might consider hiding it altogether on smaller screens.
    There's no way to prevent just one element from forcing a zoom.

    If you are optimising for lower res you should be aiming to not zoom at all.
    initial-scale=1.0 will do this providing all of the elements actually fit on the screen.

    So you would want to change your container to max-width: 980px; and allow for smaller screens.

    I'm actually about to open a thread of how I'm doing responsive layout so that may give you some ideas too.

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark,

    Thanks for the reply.

    Responsive design is a not a problem mostly. Just this particular design required some design related elements off the side of the container but could not be part of the background image and just wondered if there was some sort of property I had not heard of that allowed those elements to effectively become invisible unless on a wide browser over 980px

    Thanks


Bookmarks

Posting Permissions

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