Note that there are some explanatory texts on larger screens.

plurals
  1. POimages gets weird height on iphone
    primarykey
    data
    text
    <p>This is very strange.. If you load my page on an iphone the height of the images gets verrry heigh. But it works fine on a computer or a nexus 7 (= the pictures gets 100% of its parent). Can anyone help me figure out why? here is the css <strong>(all that should affect images is under /--- body ---/)</strong>:</p> <pre><code>{ box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-family: 'fonten'; font-weight: 700; } html, body { margin: 0; padding: 0; } body { background-image: url('css/bgnoise.png'); } /*--------------------------- OTHER -----------------------------------*/ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { zoom:1; } a { cursor: pointer; text-decoration: none; color: black; } section a:hover { opacity: 50%; } /*--------------------------- HEADER -----------------------------------*/ header { background: #fff; margin-bottom: 50px; } h1 { text-align:center; margin: 0; padding: 50px; color:black; } .nav { text-align:center; text-transform: uppercase; } .nav li, ul { list-style: none; display: inline-block; margin: 0; padding: 0; margin-bottom: 25px; letter-spacing: 4px; color: black; } .nav li { margin-right: 10px; } .nav li:last-child { display: block; margin-right: 0; } .current_page_item a { color:#fe6330; } /*--------------------------- BODY -----------------------------------*/ h3 { font-size: 1.75em; text-align: center; } h4 { text-align: center; font-size: 1.2em; margin-bottom: 0; } .seperator { height: 2px; background:black; width: 40%; margin:0px auto; } .quote { text-align: center; padding: 0px 20%; line-height: 200%; font-size: 0.85em; } .projects { margin-top: 20px; max-width: 960px; margin: 0 auto; } .proj { margin: 20px auto 0 auto; width: 60%; } .proj img { width: 100%; height: 100%; //this should make the pics height 100% of its parent } /*--------------------------- what i do -----------------------------------*/ .whatido { background: white; padding:50px; } .dos { display: table; margin: 0 auto; } .dos p { text-align: center; } /*--------------------------- FOOTER -----------------------------------*/ footer{ background: #232323; color: white; padding: 50px 0; } .footercont { display: table; margin: 0 auto; } .footercont p { text-align: center; } .footercont&gt;p&gt;a { color: white; font-size: 1.5em; } /*--------------------------- FONT -----------------------------------*/ @font-face { font-family: 'fonten'; src: url('css/raleway/raleway_thin.ttf'), url('css/raleway/raleway_thin.otf'), url('css/raleway/raleway_thin.eot'); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload