Positioning

HTML & CSS
1

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:

  .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

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

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