Develop Reference

IOS stretches an image

I have a logo on my website. The code is as follows:
footer .logo {
margin: 1px auto 26px auto;
width: 150px;
}
<footer>
<div id="footer" class="container">
<div class="row">
<img class="logo" src="logo.png">
</div>
</div>
<!-- more content here -->
</footer>
For the sake of the question, I'm replacing the logo with a banana.
It looks good on desktop, android and simulated ios devices:
what the image should look like
But something happens in real ios devices that does not happen in the simulators:
what it looks like on an actual ios device
It appears that on an IOS device the image is somehow enlarged and then compressed into the width of 150px. Strangely this is the only image that behaves like this from all the images on the website.
Do you know what might be causing this or how to fix it?

try with max-width
footer .logo {
margin: 1px auto 26px auto;
max-width: 150px;
}

It turned out that div.row was the culprit as it had display: flex. Changing to display: block fixed it.

How can i make a vertical div go horizontal in full screen

I have 2 divs side by side inside a main div. Lets say- left_div & right_div. When browser is in full screen mode- than left_div is 60% and right_div is 40% in width(as, main_div is 100% width).
Now if i restore the browser window and reduce its width- than the divs get underneath each other but still remains the same percentage as 60% & 40% of the screen.
What i want is that if the browser width gets underneath a certain amount than the divs will get underneath each other and also fillup the whole screen width-ie become full browser width.
How can i do it? Do i need to do it with JavaScript or jQuery?

HTML:
<div class="mainDiv">
<div class="left">
test
</div>
<div class="right">
test2
</div>
</div>
CSS:
div.main
{
width:100%;
}
div.left
{
width:60%;
background-color:red;
float:left;
height:100px;
}
div.right
{
width:40%;
background-color:blue;
float:left;
height:100px;
}
#media (max-width: 350px) {
div.left, div.right
{
float:none;
width:100%;
}
}

check this once may be help you here is demo
HTML
<div class="left-div">Left</div>
<div class="right-div">Right</div>
CSS
.left-div{width:60%;height:100px;float:left;background-color:#000;color:#fff}
.right-div{width:40%;height:100px;float:right;background-color:#333;color:#fff}
#media (max-width: 479px) {
.left-div, .right-div{float:none;width:100%;}
}

Your problem has been many people's problem. While you can write your own CSS, but you should consider screens with different DPIs and different devices and different browsers. But Bootstrap allows you to easily manage these situations.
http://getbootstrap.com/
once you include bootstrap in your page, you can have two DIVs like this
http://jsfiddle.net/Gt25L/119/
<div class="col-md-4"></div>
<div class="col-md-8"></div>
Also look at the tutorials, and they guide you through how to make responsive websites using bootstrap. you will not need any JavaScript. Bootstrap is based on CSS only.
This way you have less CSS to maintain and less chance of wrong behaviour in different browsers & devices over time.

Text Overlay on Image Hover - Responsive

I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!

Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;

In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->

I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE

How to dynamically change contents of HTML page based on current window size

I have a simple web page meant as a table of contents to other pages. I have five images used as buttons to those other pages, but I need them to be displayed in a specific way. I have everything centered, and the background is static and doesn't move when you scroll, but the problem is with the buttons.
I would like them to be of a specific height based on the current height of the browser. I say current height because I need it to resize itself if the user resizes the window.
Also, and more importantly, I need this to prevent the table of contents from ever being larger than the height of the browser. I noticed that on different screen resolutions, the images are larger or smaller and can look terrible because of this.
So, for instance, I want the height of there to be the same amount of space between the bottom of the browser and the table of contents, and between the top of the browser and the table of contents, no matter how large the browser window is or the resolution of the user's screen.
I was thinking, through javascript, to grab the size of the window using something like window.innerHeightand set the height of the div encompassing the table of contents to this value.
This is what I have so far, but the script doesn't seem to do anything at all (it's my first time using javascript so I might very well be doing something stupid.):
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
background-image: url(../images/background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#logo {
width: 200px;
margin-top: 15px;
}
.c1 {
width: 300px;
margin-top: 15px; <!--margin between buttons-->
}
</style>
<title>Some Title</title>
</head>
<body bgproperties="fixed"> <!--static background-->
<div align="center" id="contents">
<div >
<a href="http://somewebpage">
<img id="logo" src="images/logo.png" alt="Logo"> <!--title button-->
</a>
</div>
<div >
<a href="http://somewebpage">
<img class="c1" src="images/img1" alt="image 1"> <!--second button-->
</a>
</div>
<div>
<img class="c1" src="images/img2" alt="image 2"> <!--third button-->
</div>
<div >
<img class="c1" src="images/img3" alt="image 3"> <!--fourth button-->
</div>
<div>
<img class="c1" src="images/img4" alt="image 4"> <!--fifth button-->
</div>
</div>
<script>
var ht = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; <!--Get the height of the browser-->
document.getElementById("contents").style["height"] = ht; <--set height of table of contents-->
</script>
</body>
</html>

You can set this all by CSS but you can go with JavaScript also.
What you need is to set properties in Percentage(%); Such as:
width: 90% (You can replace value as you need to show on screen)
For preventing to not go more than specified width then you can set max-width(Again in percentage)
You can set height as auto.

$(document).resize(function(){
if(document.innerHeight > 350) {
do something
}
});

I agree with other answers in adjusting size, width and height etc. But after reading your question, i think responsive UI is what something you are looking for. Why not you try frameworks like BootStrap to help you. Instead of reinventing the wheel we can use some thing existing that is very easy to use. getbootstrap.com is the url and easy to implement.
(I couldn't post it as comment as i have less reputation :))

You can accomplish your goal two ways:
CSS Media Queries: CSS detects the size of the viewport (window, for lack of a better way of explaining it), and applies certain rules if the viewport matches the #media query. Below are some examples. Also, have a look at this CodePen for a better idea of how it works.
/* If the browser width is anything less than 100px, */
#media (max-width: 100px){
/* Set the height of an element */
#my_element{
height: 200px;
}
}
/* If the browser width is 1000px or more, */
#media (min-width: 1000px){
/* Set the height of an element */
#my_element{
height: 2000px;
}
}
/*
You can also do widths in ranges.
If the width is between 600px and 800px,
*/
#media (min-width: 600px) and (max-width: 800px){
/* Styles here */
}
/* This applies to height as well */
#media (max-height: 500px){
/* Styles here */
}
Another way you can get it done is using percentage units: set the width of your buttons to 50%, and resize the browser window. They should now be flexible. Play around with percentages until your satisfied. Personally, I prefer media queries as they allow for more precision, but take your pick! Hope this was helpful!

Parallax scrolling in Safari on iOS

As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll
How then have apple achieved it on their own website.
Look at the blurred background images as you scroll on this page.
http://www.apple.com/ios/carplay/

It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here
However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.
I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.
In your CSS add this:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
Then in your html add this:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.
I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.
Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.