Keep mobile browser from showing elements outside body?


Tags: html,css

Problem :

Im making a website where i have a square rotated 45deg in the top right corner, and some of it is outsite of the body. On desktop you not able to see it, but when i go on mobile i can zoom out and the right site of the body just gets bigger.

The red is what you able to see on you screen and this is how it looks on desktop and how i want it to look on mobile device.

http://imgur.com/ktPDPAN

But on mobile it looks like this, again where the red is what you able to see

http://imgur.com/XAFILRd

I got overflow-x hidden on body, so theres no scrollbar but the user is still able to zoom out and see the site like the second picture on mobile device.

I tried with meta tag, but its not really making any different, except that the site starts zoomed in, but user still able to zoom out. like:

Html

<body class="bg">
    <div id="box-top-right">
        <a href="#">SOME TEXT</a>
     </div>
 <div id="wrapper">
 </div>
 </body>

CSS

body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
 }

.bg {
background: url('../gfx/bg.png') top left;
}

#box-top-right {
position: absolute;
top: 75px;
right: -97px;
width: 400px;
height: 60px;
line-height: 60px;
text-align: center;
background: #ce180b;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color:white;
}

#wrapper {
width: 1200px;
position: absolute;
margin-top: -50px;
 }


Solution :

I'd just put a container inside the body and set that to overflow:hidden; Keep the rotated square within the container div. Keep the width of the container at whatever you need,

<html>
  <body>
    <div class="container">
      <div class="rotated-thingy">

And css:

html,body{
  width:100%;
  height:100%;
}
.container{
  width:100%;
  height:100%;/* depends, maybe it could be stretched by something else? */
  overflow-x:hidden;
  position:relative;
}
.rotated-thingy{
  position: absolute;
  top: 10px;
  right: 10px;/* or whatever appropriate here */
}

Sometimes elements html and body are not exactly treated the same way as the div's are.


    CSS Howto..

    How to make my HTML suitable for Mobile View

    How can I control the width of a
    with display:table; with a

    element inside with display:table-cell

    How to better write complex styles to an element via javascript?

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    How to override css for img tag

    How does style elements such as “color” in CSS apply to elements like img?

    How to use CSS Class and ID selectors

    How to make a centered, responsive CSS circle within a Boostrap div?

    How can I set my image's hover when hovering my text?

    In CSS, how to hover a background over an image

    how to exclude tags of certain types using LESS css

    How to center Nav Bar CSS

    How to animate a div when another div is clicked and how to make the animated div move other elements

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to apply first-child:first-letter to only one section?

    css how to make this checkbox smaller

    How to repeat nth-child rules for an infinite sequence in CSS

    How do I add or change the class attribute of a JSF dataTable (primefaces)?

    How to emulate window title bar in CSS/HTML

    How to align to the center a div with position absolute within a div with position relative?

    ExtJS - How to style disabled buttons?

    how to set border in firefox

    How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

    How to display just part of image on hover?

    how to give css for following data

    How to customize CSS depending on (tinier) window size?

    How to prevent css missing when exporting some html to excel file?

    How to divide a menu horizontaly between buttons , using CSS?

    How to get the CSS width of a mobile device in ASP.NET MVC?

    How to centre fluid image and a caption using CSS Flexbox?