enter image description hereSorry, another newb. requiring help, please??
I have created a site (first site for 15 years) and there are a couple of things i'd like to know but the first and most important one is, why does my site header not show on iPhones?
Android showing header
iPhone without header
I have added the viewport meta tag but it didn't change anything.
Another thing l have read on here is adding #media but it didn't say where to add it so l tried a few places without success.
Can someone help me please?
Test page code
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="left-sidebar">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<div id="logo">
<h2>Dress Up Leeds Ltd</h2>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>home</li>
<li>store</li>
<li class="active">contact us</li>
<li>about</li>
</ul>
</nav>
</div>
</div>
style.css for header
header
{
margin-bottom: 2em;
line-height: 1.7em;
}
header h2
{
font-size: 2.5em;
}
header .byline
{
display: block;
margin: 0.5em 0 0 0;
padding: 0 0 0.5em 0;
text-transform: uppercase;
font-size: 1.4em;
}
p {
font-size: 1.1em;
}
and
#header
{
position: relative;
background: #FFF;
}
#header .container
{
position: relative;
padding: 4em 0em;
}
style-mobile.css for header
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
and
#header
{
display: none;
}
#logo
{
display: none;
}
#nav
{
display: none;
}
style-mobile css the whole file
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body,input,textarea,select
{
line-height: 1.75em;
font-size: 11pt;
letter-spacing: 0;
}
body
{
padding-top: 44px;
}
h2, h3, h4, h5, h6
{
font-size: 1.5em;
}
section,
article
{
clear: both;
margin: 2em 0 2em 0 !important;
}
section > :first-child,
article > :first-child
{
margin-top: 0 !important;
}
section:first-child,
article:first-child
{
margin-top: 0 !important;
}
.container
{
padding: 0em 1em;
}
.button
{
display: block;
width: 100%;
text-align: center;
}
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
/*********************************************************************************/
/* UI */
/*********************************************************************************/
#titleBar
{
background: #202020 url(images/img01.jpg) repeat;
}
#titleBar .title
{
display: block;
color: #fff;
text-align: center;
line-height: 44px;
}
#titleBar .toggle
{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 60px;
}
#titleBar .toggle:after
{
content: '';
display: block;
width: 20px;
height: 12px;
position: absolute;
left: 10px;
top: 15px;
background: url('images/toggle.svg') 0px 0px no-repeat;
opacity: 0.5;
}
#titleBar .toggle:active:after
{
opacity: 0.75;
}
#navPanel
{
background: #202020 url(images/img01.jpg) repeat;
box-shadow: inset -10px 0px 20px 0px rgba(0,0,0,0.5);
}
#navPanel .link
{
display: block;
color: #888;
text-decoration: none;
height: 44px;
line-height: 44px;
border-top: solid 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 1em 0 1em;
}
#navPanel .link:first-child
{
border-top: 0;
}
#navPanel .link.depth-0
{
color: #fff;
}
#navPanel .indent-1 { display: inline-block; width: 1em; }
#navPanel .indent-2 { display: inline-block; width: 2em; }
#navPanel .indent-3 { display: inline-block; width: 3em; }
#navPanel .indent-4 { display: inline-block; width: 4em; }
#navPanel .indent-5 { display: inline-block; width: 5em; }
#navPanel .depth-0 { color: #fff; }
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
display: block;
}
#logo
{
display: block;
}
#nav
{
display: block;
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
padding: 6em 0em;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#page
{
padding: 2em 0em 2em 0em;
}
#main
{
margin-top: 3em;
padding-top: 0em;
border-top: none;
}
.homepage #main
{
margin-top: 3em;
padding-top: 3em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
padding: 0em 0em 2em 0em;
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
#featured
{
position: relative;
padding: 4em 0em 2em 0em;
}
#featured .divider
{
padding: 2em 0em 0em 0em;
}
#featured .left
{
float: none;
width: 100%;
}
Try this:
#header {
display: block;
}
#logo {
display: block;
}
#nav {
display: block;
}
display: none hides elements, so your css is hiding your header. The viewport tag makes no difference in whether or not the header is hidden. I am missing context here, but your css looks like it is very intentionally hiding your header, so I am guessing it was written by someone else? If so, that person may have written it with the intent of applying these css rules for one screen size and applying a different set of rules for another screen size, but perhaps they left the task unfinished, or we are only seeing a small part of the css here. If that is the case, then you should look into using media queries to apply different sets of rules for different screen sizes.
I try to better understand how CSS works. I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300;400;700;900&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
/* typography
================== */
h1 {
font-weight: 300;
font-size: 1.7rem;
margin-top: 0;
}
p {
margin-top: 0;
line-height: 1.5;
}
p:last-of-type {
margin-bottom: 0;
}
.title {
font-size: 2.5em;
margin-top: 1em;
margin-bottom: 1.5em;
font-weight: 900;
}
.title span {
font-weight: 300;
display: block;
font-size: .9em;
}
#media(min-width:60rem) {
p {
font-size: 1.2rem;
line-height: 1.6;
}
.title {
font-size: 3.7em;
margin-bottom: 1em;
margin-top: 0;
font-weight: 900;
}
}
/* buttons */
.button {
display: inline-block;
font-size: 1.15em;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
padding: .5em 1.75em;
color: #00ff6c;
border-color: #00ff6c;
}
#media (min-width: 60rem) {
.button {
font-size: 1.5rem;
}
.button-small {
font-size: .7rem;
font-weight: 700;
}
.button-accent {
color: #00ff6c;
border-color: #00ff6c;
}
.button-accent:hover,
.button-accent:focus {
background: #00ff6c;
color: #232323;
}
}
/* header
================== */
header {
position: absolute;
margin-top: 1em;
left: 0;
right: 0;
margin: 1em;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
padding: .5em;
text-transform: uppercase;
color: #FFF;
font-size: .8rem;
}
nav a: hover,
nav a: focus {
color: #DDD;
}
#media(min-width:60rem) {
.logo {
float: left;
}
nav {
float: right;
}
}
/* home-hero
================== */
.home-hero {
background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
color: #FFF;
}
#media (min-width: 60rem) {
.home-hero {
height: 100vh;
padding-top: 35vh;
}
}
/* hero-home
======================== */
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin: 0 -2.5vw;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
position: relative;
}
.home-about-textbox h1 {
color: #00ff6c;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
white-space: nowrap;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: mediumvioletred;
color: magenta;
}
#media (min-width: 25rem) {
h1 {
font-size: 2 rem;
}
.home-about-textbox h1 {
top: .6em;
padding: 0 .325em;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-image: url();
background-repeat: no-repeat;
padding-bottom: 10em;
}
.home-about-textbox {
width: 50%;
padding: 7em;
outline-offset: -3.75em;
margin-left: -2.5%;
top: -5em;
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
}
.home-about-textbox h1 {
top: .75em;
left: 6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
}
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: coral;
font-weight: 100;
color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creative Inc.</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">Making things looks great
<span>for companies who make great stuff</span>
</h1>
See Our Work
</div>
</section>
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who we are</h1>
<p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
<p>
<srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
</p>
</div>
</section>
</div>
</body>
</html>
Here, the home-about-textbox is defined in three different ways with the class attribute :
`<div class="container">
<section class="home-about"> for pc media
<div class="home-about-textbox">`for mobile media
But the container also selects the "home-hero" section: <section class="home-hero"> <div class="container">.
I tried to figure out what is the role of the container. When I select the .container in the css style sheet just the "home-about-textbox" becomes blue on the browser so I tried to change color of the container to see if this class truly selects both of the sections( "home-hero" & "home-about-textbox") how it seems to be.
I selected the container again at the end of the code to make sure that nothing else overrides it (the last media declaration is closed) and I styled with crazy colors but nothing change. I even tried !important rule and the style is the same. My question is:
What exactly this container class selects in the code and why I can't style it?
container is a class that is given to a div tag to define your web page size, and all of the other elements should be inside of it so they will have all styles given to their parent ( container)
you use the !important wrong, you should use it this way:
background-color: red !important;
I'm very new at CSS so please be patient with me. I am trying to set a video background for a section with a semi transparent text box over the video. After wrestling with it for a while, I finally got the video fitted to the screen and resizing when the screen shrinks.
The problem is, now the section containing the text doesn't resize when the screen becomes narrower. Instead, the text disappears under the next div down.
I presumed this is because the aspect ratio of the video can't be modified. The best solution I could come up with is to set a media query to replace the video with a static background when the screen is under 700 pixels wide. I was hoping that the normal properties of auto;" would then kick in and accommodate the additional length of the text. However, the video doesn't respond to the "display: none;" tag when placed in a media query.
I'm kind of stuck as to what to do.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, `enter code
here`initial-scale=1.0">
<title>Jamaa</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="navbar">
<li><p href="#home" style="margin-left: 20px;">JAMAA</p></li>
<li style="float:right">Contact</li>
<li style="float:right">News</li>
<li style="float:right"><a class="left" href="#about">Blog</a></li>
</ul>
<section class="intro">
<div class="content">
<img src="images/jamaalogo.png"
style="height:300px; margin-top: 5%; align-content: center; "
class="center">
<h1 class="motto">Share. Profit.</h1>
<h2 style="text-align: center;">Using finance to increase cryptocurrency
access for those who need it most.</h2>
</div>
</section>
<div class="video_wrapper">
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; ">
<source src="images/fountain.mp4" type="video/mp4">
<div class="problem_box"><h2>We Have a Problem</h2><p>People are
losing their savings. Governments are collapsing. The threat of war is
looming on the horizon. All of these problems have a common source- bad
money. And yet most of us don't know what we can do about it.</p></div>
</video>
Here is the CSS:
#font-face {
font-family: 'textabold';
src: url('fonts/texta-bold-webfont.woff2') format('woff2'),
url('fonts/texta-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono"
rel="stylesheet">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
}
h2 {
font-size: 2em;
display: block;
color: white;
font-weight: 300;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1 em;
font-weight: 500;
color: white;
}
a {
font-weight: 700;
color: #333;
&:hover{
opacity: 0.8;
}
&:active {
top: 1px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.container {
display: flex;
color: white;
justify-content: space-between;
align-items: center;
padding: 2px 44px;
}
.navbar {
position: fix
}
#media screen and (max-width : 760px){
ul {
display: none;
}
.intro { background: red;}
.video_wrapper {
height:auto;
background: url("images/relief.jpg") no-repeat center center;
background-size: cover;
}
.video {
display: none;
}
}
.title {
display: block;
color: white;
align-items: center;
padding: 12px 44px;
font-size:;
}
li a:hover {
background-color: #4CAF50;
}
.intro {
height: 92vh;
background-color: #4CAF50;
display: block;
overflow: hidden;
}
.problem {
max-height: 60vh;
background-size: cover;
opacity: 0.8;
z-index: -100;
}
.problem_box {
height:70%;
z-index: 2;
}
.video_wrapper{
width: auto;
position: relative;
overflow: hidden;
z-index: -1;
margin-bottom: -30px;
text-align: center;
}
.video_wrapper video{
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 1;
height: auto;
overflow: auto;
}
.video_wrapper .problem_box {
height: auto;
width: 70%;
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
background: #333;
opacity: 0.9;
display: inline-block;
margin-top: 8%;
margin-left: 15%;
box-sizing: content-box;
}
I suppose I could just give up and use static background, but it took me so long to figure out the video background I'd hate to throw it away it this point... any help is much appreciated!
you forgot to put the video class on the video tag
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; " class="video">
I'm having an issue with a site I'm building.
When I use a debugger with the dimensions of my phone, everything looks great and works as it should.
When I go to the site with my smart phone, however, I just see a black, empty page...
What's going wrong?
Thanks!
http://holymothership.be/
CSS
body {
font-family:"Karla", Helvetica, Arial, sans-serif;
font-size:20px;
font-weight: 400;
color: #ffffff;
overflow: hidden;
cursor: default;
background-color: #000;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center; /* OLD… */
-ms-flex-align: center; /* You know the drill now… */
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
height: 100%;
width: 100%; /* needed for Firefox */
}
h1,h2,h3,h4,h5,h6,p {
/*line-height: 7vh;*/
}
h1 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: block;
}
h2 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
h3 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
a {
cursor: hand;
color: #fff;
text-decoration: none;
}
b {
font-weight: bold;
}
a:hover {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 1px;
text-decoration: none;
}
.underline {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 2px;
text-decoration: none;
}
a.footer:hover{
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.2vh;
border-bottom-color: #fff;
padding-bottom: 0px;
text-decoration: none;
}
#work {
background-position: center center;
background-repeat: no-repeat;
background-image:url("../cover.png");
position:absolute;
left:0;
top:0;
/*background-size: contain;*/
height:600px;
width:600px;
margin: -100px;
z-index: 1;
cursor: pointer;
}
#overlay {
background-color: #000;
box-shadow: 0 0 100px #ffffff;
z-index: 9999;
position: relative;
width: 1000px;
height: 700px;
display: -webkit-box; display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center; -moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
}
#header {
width:auto;
font-weight: 400;
font-family:"Karla", Helvetica, Arial, sans-serif;
color: #FFF;
position: absolute;
top: 25px;
left: 25px;
}
#footer {
width:auto;
position: absolute;
bottom:25px;
left:25px;
right:25px;
padding-bottom: -4px;
}
#links {
float:left;
position: relative;
}
#contact {
float:left;
padding-left:80px;
position: relative;
}
#secret {
color: #000;
float:right;
position:relative;
}
#logo {
position: absolute;
margin-left: -200px;
margin-top: -135px;
top: 50%;
left: 50%;
width: 400px;
height: 270px;
background-image: url("../logo.svg");
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
#logo1 {
float: right;
position: absolute;
width:150px;
height: auto;
bottom:25px;
right:25px;
padding-bottom: -4px;
}
#logo2 {
display: none;
}
a.secret:hover{
cursor:hand;
text-shadow: 0 0 10px #ffffff;
text-decoration: none;
border-bottom-style: none;
}
#font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?63082030');
src: url('../font/fontello.eot?63082030#iefix') format('embedded-opentype'),
url('../font/fontello.woff?63082030') format('woff'),
url('../font/fontello.ttf?63082030') format('truetype'),
url('../font/fontello.svg?63082030#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?63082030#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
zoom: 0.8;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .6em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-twitter:before { content: '\e800'; } /* '' */
.icon-phone:before { content: '\e801'; } /* '' */
.icon-location:before { content: '\e802'; } /* '' */
.icon-mail:before { content: '\e803'; } /* '' */
.icon-facebook:before { content: '\e804'; } /* '' */
.icon-copy:before { content: '\e805'; } /* '' */
#font-face {
font-family: 'Avara'; /*a name to be used later*/
src: url('../font/Avara.ttf'); /*URL to font*/
}
#media only screen and (max-width: 1100px) , screen and (max-height: 840px) {
#overlay{
width: 800px;
height: 560px;
}
h1 {
font-size: 1.45em;
}
#footer {
font-size:0.8em;
}
#contact {
padding-left:60px;
}
#logo {
position: absolute;
margin-left: -150px;
margin-top: -102px;
top: 50%;
left: 50%;
width: 300px;
height: 204px;
}
#logo1 {
width: 120px;
}
#media only screen and (max-width: 920px) , screen and (max-height: 700px) {
#overlay{
width: 600px;
height: 420px;
}
h1 {
font-size: 1.06em;
}
#footer {
font-size:0.8em;
}
#contact {
padding-left:40px;
}
#logo {
position: absolute;
margin-left: -100px;
margin-top: -68px;
top: 50%;
left: 50%;
width: 200px;
height: 136px;
}
#logo1 {
width: 100px;
}
#media only screen and (max-device-width: 460px) and (orientation: portrait) {
#overlay{
width: 220px;
height: 380px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
font-size: 1.0em;
display: block;
}
h3 {
display: none;
}
#footer {
font-size:0.37em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left:10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 80px;
height: auto;
display: block;
margin-top: 265px;
left: 10px;
position: absolute;
}
#media only screen and (max-device-width: 640px) and (orientation: landscape) {
#overlay{
width: 380px;
height: 220px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
display: none;
}
h3 {
font-size: 1.0em;
display: block;
}
#footer {
font-size:0.6em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left:10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 60px;
height: auto;
display: block;
left: 310px;
bottom: 10px;
position: fixed;
float: right;
}
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Holy Mothership</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="description" content="Holy Mothership is a multidisciplinary design collective based in Antwerp, Belgium."/>
<meta name="author" content="Holy Mothership"/>
<meta name="keywords" content="Holy Mothership, graphic design, studio, antwerp, collective, print, webdesign, copy, illustration"/>
<!-- open graph -->
<meta property="og:title" content="Holy Mothership"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://holymothership.be"/>
<meta property="og:image" content="http://holymothership.be/logo-s.jpeg"/>
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:description" content="Holy Mothership is a multidisciplinary design collective based in Antwerp, Belgium.
It was founded by Tom Anthoni, Benny Arts, Christophe Clarijs, Elias Derboven and Ellen Pollard."/>
<meta property="fb:admins" content="1514858388765304"/>
<!-- end of open graph -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="JavaScript" src="js/script.js"></script>
<script language="JavaScript" src="js/jquery.js"></script>
<script language="JavaScript" src="js/matchmedia.js"></script>
<script language="JavaScript" src="js/analytics.js"></script>
<link href='http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://holymothership.be/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://holymothership.be/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://holymothership.be/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://holymothership.be/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://holymothership.be/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://holymothership.be/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="http://holymothership.be/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://holymothership.be/favicon/favicon-16x16.png" sizes="16x16" />
<meta name="application-name" content="Holy Mothership"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="http://holymothership.be/favicon/mstile-144x144.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="work"></div>
<div id="logo"></div>
<div id="overlay">
<div id="header">
<h1><b>Holy Mothership</b> is a multidisciplinary design collective<br>
founded by Tom Anthoni, Benny Arts,<br>
Christophe Clarijs,
Elias Derboven and Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h1>
<h2><b>Holy Mothership</b> is<br>
a multidisciplinary<br>
design collective<br>
founded by<br>
Christophe Clarijs,<br>
Benny Arts,<br>
Elias Derboven,<br>
Tom Anthoni and<br>
Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h2>
<h3><b>Holy Mothership</b> is a multidisciplinary<br>
design collective founded by<br>
Tom Anthoni, Benny Arts, Ellen Pollard,<br>
Christophe Clarijs and Elias Derboven.<br>
Our studio is located in Antwerp, Belgium.</h3>
</div>
<div id="footer">
<div id="links">
<ic class="icon-twitter"></ic>twitter <br>
<ic class="icon-facebook"></ic>facebook <br>
<ic class="icon-copy"></ic>2014
</div>
<div id="contact">
<ic class="icon-location"></ic>Marialei 29, 2018 Antwerp, Belgium<br>
<ic class="icon-mail"></ic>contact#holymothership.be<br>
<ic class="icon-phone"></ic>+32 (0)494 39 87 82
</div>
</div>
<div id="logo1">
<img src="logo1.svg">
</div>
<div id="logo2">
<img src="logo2.svg">
</div>
</div>
<div id="footer">
<div id="secret"><br><br>
The Landing of…
</div>
</div>
</body>
</html>
I edited your JSFiddle - http://jsfiddle.net/xdm6or92/ and I added two media queries for iPhone portrait and landscape mode. It's hard to test responsive page using JSFiddle, so I uploaded working example on my private server. This way you can enter page from your iPhone or other smartphone and see if it's working. Link - http://mikemoney.nazwa.pl/holymothership/.
Media queries for iPhone
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 460px) and (orientation: portrait) {
.iphone-portrait {
display: block;
}
}
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 640px) and (orientation: landscape) {
#overlay {
width: 500px;
height: 460px;
}
.iphone-landscape {
display: block;
color:blue;
}
}
Full working example [code] http://mikemoney.nazwa.pl/holymothership/.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
font-family:"Karla", Helvetica, Arial, sans-serif;
font-size:20px;
font-weight: 400;
color: #ffffff;
overflow: hidden;
cursor: default;
background-color: #000;
display: -webkit-box;
/* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;
/* OLD: Firefox (buggy) */
display: -ms-flexbox;
/* MID: IE 10 */
display: -webkit-flex;
/* NEW, Chrome 21–28, Safari 6.1+ */
display: flex;
/* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
/* OLD… */
-ms-flex-align: center;
/* You know the drill now… */
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
height: 100%;
width: 100%;
/* needed for Firefox */
}
h1, h2, h3, h4, h5, h6, p {
/*line-height: 7vh;*/
}
h1 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: block;
}
h2 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
h3 {
margin-top: -5px;
font-weight: 100;
font-size: 1.83em;
display: none;
}
a {
cursor: hand;
color: #fff;
text-decoration: none;
}
b {
font-weight: bold;
}
a:hover {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 1px;
text-decoration: none;
}
.underline {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.3vh;
border-bottom-color: #fff;
padding-bottom: 2px;
text-decoration: none;
}
a.footer:hover {
cursor: hand;
border-bottom-style: solid;
border-bottom-width: 0.2vh;
border-bottom-color: #fff;
padding-bottom: 0px;
text-decoration: none;
}
#work {
background-position: center center;
background-repeat: no-repeat;
background-image:url("../cover.png");
position:absolute;
left:0;
top:0;
/*background-size: contain;*/
height:600px;
width:600px;
margin: -100px;
z-index: 1;
cursor: pointer;
}
#overlay {
background-color: #000;
box-shadow: 0 0 100px #ffffff;
z-index: 9999;
position: relative;
width: 1000px;
height: 700px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
/* IE 9 */
-webkit-transform: rotate(-5deg);
/* Chrome, Safari, Opera */
}
#header {
width:auto;
font-weight: 400;
font-family:"Karla", Helvetica, Arial, sans-serif;
color: #FFF;
position: absolute;
top: 25px;
left: 25px;
}
#footer {
width:auto;
position: absolute;
bottom:25px;
left:25px;
right:25px;
padding-bottom: -4px;
}
#links {
float:left;
position: relative;
}
#contact {
float:left;
padding-left:80px;
position: relative;
}
#secret {
color: #000;
float:right;
position:relative;
}
#logo {
position: absolute;
margin-left: -200px;
margin-top: -135px;
top: 50%;
left: 50%;
width: 400px;
height: 270px;
background-image: url("../logo.svg");
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
#logo1 {
float: right;
position: absolute;
width:150px;
height: auto;
bottom:25px;
right:25px;
padding-bottom: -4px;
}
#logo2 {
display: none;
}
a.secret:hover {
cursor:hand;
text-shadow: 0 0 10px #ffffff;
text-decoration: none;
border-bottom-style: none;
}
#font-face {
font-family:'fontello';
src: url('../font/fontello.eot?63082030');
src: url('../font/fontello.eot?63082030#iefix') format('embedded-opentype'), url('../font/fontello.woff?63082030') format('woff'), url('../font/fontello.ttf?63082030') format('truetype'), url('../font/fontello.svg?63082030#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?63082030#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"fontello";
font-style: normal;
font-weight: normal;
speak: none;
zoom: 0.8;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .6em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-twitter:before {
content:'\e800';
}
/* '' */
.icon-phone:before {
content:'\e801';
}
/* '' */
.icon-location:before {
content:'\e802';
}
/* '' */
.icon-mail:before {
content:'\e803';
}
/* '' */
.icon-facebook:before {
content:'\e804';
}
/* '' */
.icon-copy:before {
content:'\e805';
}
/* '' */
#font-face {
font-family:'Avara';
/*a name to be used later*/
src: url('../font/Avara.ttf');
/*URL to font*/
}
.iphone-portrait, .iphone-landscape {
display: none;
color: red;
}
#media only screen and (max-device-width: 1100px), screen and (max-device-height: 840px) {
#overlay {
width: 800px;
height: 560px;
}
h1 {
font-size: 1.45em;
}
#footer {
font-size: 0.8em;
}
#contact {
padding-left: 60px;
}
#logo {
position: absolute;
margin-left: -150px;
margin-top: -102px;
top: 50%;
left: 50%;
width: 300px;
height: 204px;
}
#logo1 {
width: 120px;
}
}
#media only screen and (max-device-width: 920px), screen and (max-device-height: 700px) {
#overlay {
width: 600px;
height: 420px;
}
h1 {
font-size: 1.06em;
}
#footer {
font-size: 0.8em;
}
#contact {
padding-left: 40px;
}
#logo {
position: absolute;
margin-left: -100px;
margin-top: -68px;
top: 50%;
left: 50%;
width: 200px;
height: 136px;
}
#logo1 {
width: 100px;
}
}
#media only screen and (max-device-width: 700px), only screen and (max-device-height: 530px) {
#overlay {
width: 220px;
height: 380px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
font-size: 1.0em;
display: block;
}
h3 {
display: none;
}
#footer {
font-size: 0.37em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left: 10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 80px;
height: auto;
display: block;
margin-top: 265px;
left: 10px;
position: absolute;
}
}
#media only screen and (max-device-height: 460px) {
#overlay {
width: 380px;
height: 220px;
}
#header {
top: 10px;
left: 10px;
}
h1 {
display: none;
}
h2 {
display: none;
}
h3 {
font-size: 1.0em;
display: block;
}
#footer {
font-size: 0.6em;
bottom: 10px;
left: 10px;
}
#contact {
padding-left: 10px;
}
#work {
display: none;
}
#logo {
display: none;
}
#logo1 {
display: none;
}
#logo2 {
width: 60px;
height: auto;
display: block;
left: 310px;
bottom: 10px;
position: fixed;
float: right;
}
}
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 460px) and (orientation: portrait) {
.iphone-portrait {
display: block;
}
}
/*iPhone portrait orientation for Safari */
#media only screen and (max-device-width: 640px) and (orientation: landscape) {
#overlay {
width: 500px;
height: 460px;
}
.iphone-landscape {
display: block;
color:blue;
}
}
</style>
</head>
<body>
<div id="work"></div>
<div id="logo"></div>
<div id="overlay">
<div id="header">
<h1><b>Holy Mothership</b> is a multidisciplinary design collective<br>
founded by Tom Anthoni, Benny Arts,<br>
Christophe Clarijs,
Elias Derboven and Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h1>
<h2><b>Holy Mothership</b> is<br>
a multidisciplinary<br>
design collective<br>
founded by<br>
Christophe Clarijs,<br>
Benny Arts,<br>
Elias Derboven,<br>
Tom Anthoni and<br>
Ellen Pollard.<br>
Our studio is located in Antwerp, Belgium.</h2>
<h3><b>Holy Mothership</b> is a multidisciplinary<br>
design collective founded by<br>
Tom Anthoni, Benny Arts, Ellen Pollard,<br>
Christophe Clarijs and Elias Derboven.<br>
Our studio is located in Antwerp, Belgium.</h3>
<div class="iphone-portrait">It's portrait mode</div>
<div class="iphone-landscape">It's landscape mode</div>
</div>
<div id="footer">
<div id="links">
<ic class="icon-twitter"></ic>twitter
<br>
<ic class="icon-facebook"></ic>facebook
<br>
<ic class="icon-copy"></ic>2014</div>
<div id="contact">
<ic class="icon-location"></ic>Marialei 29, 2018 Antwerp, Belgium
<br>
<ic class="icon-mail"></ic>contact#holymothership.be
<br>
<ic class="icon-phone"></ic>+32 (0)494 39 87 82</div>
</div>
</div>
<div id="footer">
<div id="secret">
<br>
<br> The Landing of…
</div>
</div>
</body>
</html>
I have two divs featureText and skillsText one right after the other, I am trying to get the second one to float right of the next one instead of stacking, I have tried position relative on the second one with float left to no avail, the container itself is positioned relative. When I inspect the first div it shows to be super wide yet I have a width set and margins and paddings have been set to 0 to see if that was the problem. This is such a noob problem, but I need help.
live site
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<div id="featureText">
<h1>Recent Works</h1>
</div>
<div id="skillsText">
<h1>Super hero skills</h1>
</div>
<div id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<div id="springmethod">
<h1 class="springmethod">Springmethod.com</h1>
</div>
<div id="goodmorning">
<h1 class="goodmorning">goodmorningmoon.ca</h1>
</div>
</div>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto;
position: relative; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#featureText {
margin-top: 70px;
margin-bottom: 20px;
width: 24%;
background: red; }
#featureText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700; }
#skillsText {
width: 28%;
background: aqua;
position: relative;
float: left; }
#skillsText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700;
margin-top: -10px; }
#siteThumbs {
position: relative;
float: left;
width: 960px; }
#siteThumbs .springmethod {
background: url("../images/springmethod.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs .goodmorning {
background: url("../images/goodmorning.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover .springmethod {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
#siteThumbs a:hover .goodmorning {
background: url("../images/goodmorning.jpg") 0 -241px no-repeat; }
#springmethod {
width: 318px;
position: relative;
float: left; }
#goodmorning {
width: 318px;
position: relative;
float: left; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
Remove margin-top: 70px; from #featureText and float left #skillsText
#featureText {
margin-bottom: 20px;
width: 24%;
background: red;
float: left;
}
#skillsText { float:left; }