Categories
Android Chrome Development Devices iPhone

Extra whitespace between stacked divs on chrome (android) and safari (iphone) only

I am having an issue where my website displays correctly on my laptop (chrome/windows), including in the mobile emulator. But there is an additional horizontal whitespace between the .container-top div and the .projects div that shows up on my pixel (chrome) and on my friend’s iphone / safari. It does render correctly on Firefox on my phone.

This is how it displays on my laptop (correct, with no whitespace between down-arrow and first image):

Correct display on laptop

This is a screenshot from my phone (incorrect – additional whitespace between down-arrow and first image):

Incorrect display on chrome/android

Any idea why this might be happening?

Link to my test site.

HTML and CSS below.

@charset "UTF-8";

@font-face	{
	font-family: "Tw Cen MT Bold";
	src: url("font/TCB_____.TTF");
}

@font-face{
	font-family: "Tw Cen MT";
	src: url("font/TCM_____.TTF");
}

/* Body */
html {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
body {
	font-family: "Tw Cen MT";
	background-color: #ddd;
	color:#000;
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: 200;
	font-size: 10px;
}
/* Container */
.container {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 0;
	padding-left: 0;
	text-align: left;
	min-height: 100vh;
}
.container-top	{
	display: block;
	position: static;
	height:100vh;
	margin:0;
	padding:0;
	width:100%;
}
	.navlinks {
		position: absolute;
		bottom: 0;
		padding: 0;
		margin: 0;
		z-index: 11;
	}

.projects	{
	display: block;
	position: static;
	width:100%;
	margin:0;
	padding: 0;
}
	.carousel	{
		margin: 0px;
		margin-top: -0.13em;
		margin-bottom: 0.10em;
		padding: 0px;
		left: 0px;
	}
		.carousel-cell	{
			width: 100%;
			height: 850px;
			padding: 0;
			margin:0;
			overflow: hidden;
		}
		.carousel img	{
			display: block;
			margin:0;
			margin-right: auto;
			height: 100%;
			width: auto;
		}

.video4to3	{
	width: 1145px;
	height: 850px;
	margin:0;
	padding:0;
	border: none;
}

.projecttext	{
	width: 95%;
	padding-right: 5%;
	font-size: 48px;
	letter-spacing: 0.02em;
	line-height: 1.146em;
	height: 100%;
	background-color: #e3e3e3;
}
.about	{
	padding: 0px;
	font-size: 48px;
	letter-spacing: 0.02em;
	line-height: 1.146em;
	width: 90vw;
}

b {
	font-family: 'Tw Cen MT Bold';
}
.bigtext	{
	font-family: 'Tw Cen MT Bold';
	position: relative;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 144px;
	line-height: 0.64em;
	padding: 0px;
	margin: 0;
	margin-left:-0.07em;
	vertical-align: bottom;
	z-index: 11;
}
/*.bigtext:hover	{
	text-decoration:line-through;
	text-decoration-style:dotted;
	text-decoration-color: cyan;
}*/
.bigtext a  {
	color: #000;
	text-decoration: none;
}

a:hover {
	color:#000;
	text-decoration:line-through;
	text-decoration-style:dotted;
	text-decoration-color: cyan;
}

/* Smaller phones */
@media (max-width: 320px) {
	
	.bigtext	{
		font-size: 31px;
	}
	.projecttext	{
		font-size: 12px;
	}
	.about	{
		font-size: 12px;
	}
	.carousel	{
		margin-top: -0.02em;
		margin-bottom: 0.03em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}

}
/* big phones / Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
	
	.bigtext	{
		font-size: 42px;
	}
	.projecttext	{
		font-size: 16px;
	}
	.about	{
		font-size: 16px;
	}
	.carousel	{
		margin-top: -0.03em;
		margin-bottom: 0.05em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}

}
/* iPad etc */
@media (min-width: 768px) and (max-width: 1096px) {
	.bigtext	{
		font-size: 72px;
	}
	.about 	{
		font-size: 30px;
	}
	.projecttext	{
		font-size: 30px;
	}
	.carousel	{
		margin-top: -0.1em;
		margin-bottom: 0.1em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultramoderne⸺Architecture⸺Providence RI</title>
<link href="css/ultranew.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flickity.css" media="screen" />
<script src="js/flickity.pkgd.js"></script>
<script src="js/hash.js"></script>
<script>
	function swapText(elem, text)	{
		elem.innerHTML = text;
	}
</script>
</head>
<body>
<!-- Main Container -->
<div class="container">
	<div class="container-top">
		<div class="navlinks">
			<div class="bigtext" style="margin-left: -0.045em;">
				<a href="about.html">ABOUT</a>
				</div>
			<div class="bigtext">
				<a href="index.html" id="top">PROJECTS</a>
				</div>
			<div class="bigtext">&nbsp;</div>
			<div class="bigtext" 
				 style="margin-left:-0.01em; margin-top: -0.02em; overflow-y: hidden; 
						background-image: url('images/down-arrow.svg'); background-repeat: no-repeat;"><a href="#top" style="overflow: hidden; margin:0; padding:0;">&nbsp;&nbsp;&nbsp;</a>
			</div>
		</div>
	</div>
  <div class="projects">	
		<div class="carousel" data-flickity='{ "cellAlign": "left", "pageDots": false, "draggable": ">1", 
											 "wrapAround": true, "prevNextButtons": false, "hash": true , "lazyLoad": 2 }'>
			<div class="carousel-cell" id="p101">
				<img data-flickity-lazyload="./images/vacant01.gif" />
			</div>
			<div class="carousel-cell" id="p102">
				<div class='projecttext'>An oversize textile hangs within the industrial warehouse: a floating tabula rasa. The lightweight fabric hangs in a subtle catenary shape, creating new spaces and environments without the construction of a single wall. Monumental voids cut into the fabric lightly define rooms within the larger space, while a careful choreography allows the textile to animate between states twice during the night: from a low&mdash;lying plane that clears the space to floating overhead canopy&mdash;and back again.<br /><br />Table's Clear was an installation for the Architectural League of New York's Beaux Arts Ball 2016.</div>
			</div>
			<div class="carousel-cell" id="p103">
				<img data-flickity-lazyload="./images/rwp_01.jpg" />
			</div>
			<div class="carousel-cell" id="p104">
				<img data-flickity-lazyload="./images/stl17.jpg" />
			</div>
	  	</div>
		<div class="bigtext" style="margin-left:-0.02em">
			VACANT PROVIDENCE
	  </div>
		<div class="carousel" data-flickity='{ "cellAlign": "left", "pageDots": false, "draggable": ">1", 
											 "wrapAround": true, "prevNextButtons": false, "hash": true , "lazyLoad": 2 }'>
			<div class="carousel-cell" id="p201">
				<img data-flickity-lazyload="./images/triennial01.jpg" />
			</div>
			<div class="carousel-cell" id="p202">
				<div class='projecttext'>An oversize textile hangs within the industrial warehouse: a floating tabula rasa. The lightweight fabric hangs in a subtle catenary shape, creating new spaces and environments without the construction of a single wall. Monumental voids cut into the fabric lightly define rooms within the larger space, while a careful choreography allows the textile to animate between states twice during the night: from a low&mdash;lying plane that clears the space to floating overhead canopy&mdash;and back again.<br /><br />Table's Clear was an installation for the Architectural League of New York's Beaux Arts Ball 2016.</div>
			</div>
			<div class="carousel-cell" id="p203">
				<img data-flickity-lazyload="./images/rwp_01.jpg" />
			</div>
			<div class="carousel-cell" id="p204">
				<iframe class="video4to3" src="https://player.vimeo.com/video/152848442?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
			</div>
	</div>
		<div class="bigtext" >
			RISD TRIENNIAL
			</div>	
		<div class="bigtext">
			<a href="buildings.html" id="top">BUILDINGS</a>
			</div>
		<div class="bigtext">
			<a href="index.html">ULTRAMODERNE</a></div></div></div></body></html>

Leave a Reply

Your email address will not be published. Required fields are marked *