Ok, so i'm working on my website, I am trying to make it responsive but without the use of any frameworks or #media queries in the css. I have used relative lengths such as %, vw, and vh on widths, heights, and fonts in the CSS. I thought this was working ok when i uploaded my website. When i re-size the browser window it does kind of work (minus the padding and margin issues). I thought my idea had worked until i checked my site on a iphone 6s and tablet. iPhone and tablet seem ok when in portrait but when in landscape its really bad! The idea i am going for, is that all content to resize/scaled down and remain within the yellow border that is attached around the body. Is it possible for me to do this without using media queries? How do i make my content properly scale down with the Viewport?
HTML & CSS
html{
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
body {
height: 100vh;
width: auto;
margin: 0;
padding: 0;
position: relative;
text-align: center;
font-family: 'PT Sans', sans-serif;
color: #ffff00;
}
body::before {
content: '';
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
border: 3px solid yellow;
}
p a {
color: #ffff00;
letter-spacing: 5px;
}
video{
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
.screen {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: grey;
opacity: 0.4;
}
.container{
display: block;
text-align: center;
padding-top: 50px;
margin: 0px auto;
min-width: 60%;
}
.menu{
height: 50%;
width:50%;
left: 50%;
top: 50%;
display: inline-block;
text-align: center;
}
.logo{
display: inline-block;
max-height: 25vh;
max-width: 25vw;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
.logo h1{
font-size: 3vw;
letter-spacing: 4px;
}
.nav-menu{
margin: 20px auto;
font-size: 2vw;
display: inline-block;
padding: 13px 2px 1px 2px;
border: 3px solid #ffff00;
line-height: 0px;
}
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- SEO META -->
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="WEBSITE">
<meta name="author" content="SitePoint">
<title>| Louis Lombardi |</title>
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- video -->
<video id='video' preload>
<source src="vid/vt1.mp4" type="video/mp4" >
<p>Your browser does not support HTML5 video.</p>
</video>
<!-- MENU SECTION -->
<div class="container">
<div class="menu col-12">
<div class="logo"> <img src="img/louis-media-logo.png" class="img-responsive" alt="media and design logo"> <h1>MEDIA</h1> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> ABOUT </p> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> PORJECTS </p> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> CONTACT </p> </div>
</div>
</div> <!-- Container -->
</body>
</html>
Related
In my app I have image and text under the pic - in media queries. I want to display the text after the pic, but somehow it overlaps:
jsFiddle: https://jsfiddle.net/orbwthma/
#media only screen and (max-width: 614px) {
#page-content {
position: absolute;
top: 0;
right: 0;
margin-top: 0 !important;
padding: 0 !important;
}
#main-pic {
position: absolute;
top: 0;
background-size: contain;
background-image: url('../assets/feev-cropped.png');
background-repeat: no-repeat;
margin-bottom: 0 !important;
}
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
}
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
float: right;
margin: 20px 0px 120px 0;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row" style='float:right;'>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried many things but nothing helped. I think this might have some connections to the position: abolute of the image, but after a while I can't see anything that could help this and prevent overlaping.
EDIT: Try to resize window of the snipped to see overlapping
Please do not use float for layout purposes. There are other solutions for that ( grid or flexbox )
Use flexbox by adding display:flex on #page-content and make use of the flex-direction property. On > 414px use flex-direction: column and then in the media query reverse the order of the text/image by adding flex-direction: column-reverse .
Check below or jsFiddle
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
margin: 20px 0px 120px 0;
}
#page-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
}
#media only screen and (max-width: 414px) {
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
#page-content {
flex-direction: column-reverse;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row">
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer
I'm currently creating a single page video playing for store advertisement.
My problem is how can i set the video tag to full height relative to its parent div? I used vh dimension but still no luck to solve that.
As you can see on the image the video portion has gaps on both its top and bottom. already set the padding and margin to 0.
Code:
<!DOCTYPE html>
<!-- http://www.101computing.net/html-website-layout/ -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
BODY {
background-color: #FFF;
overflow: hidden;
width: 100%;
margin: 0px;
}
.page {
display: block;
width: 100%;
min-height: 800px;
overflow: auto;
margin: 0px auto 0px auto;
box-sizing: border-box;
}
.pageClockPanel {
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
clear: none;
width: 60%;
height: 10%;
padding: 10px;
}
.pageRightPanel {
background-color: #1A237E;
position: fixed;
top: 0px;
right: 0px;
clear: none;
width: 40%;
height: 87%;
box-sizing: border-box;
padding: 10px;
}
.pageLeftPanel {
background-color: #E64A19;
position: fixed;
top: 10%;
left: 0px;
clear: none;
width: 60%;
height: 77%;
box-sizing: border-box;
padding: 0px;
}
.pageBottomPanel {
background-color: #333;
position: fixed;
bottom: 0px;
right: 0px;
clear: none;
height: 13%;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.item img {
width: 100%;
min-height: 77vh
}
.item video,
source {
width: 100%;
min-height: 77vh;
}
</style>
<title>Page Title</title>
<!-- https://www.bootply.com/59900 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
<div class="pageClockPanel">
</div>
<div class="pageRightPanel">
</div>
<div class="pageLeftPanel">
<div class="row">
<div class="col-md-12">
<div class="item">
<video video autobuffer autoplay>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
</video>
</div>
</div>
</div>
</div>
<div class="pageBottomPanel">
</div>
</div>
</body>
</html>
I solved my problem by adding this css
.item{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.item video {
min-width: 100%;
min-height: 100%;
height:auto;
}
css explanation here
The video tag get always the same ratios (width/height) as the video file.
It would looks like stretched if you want to fit the width and the height - if this is just possible.You can try to set the height attribute of the video tag
Simple code.jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<div class="navTitle">1</div>
<div class="subNav subNav1">test1</div>
<div class="subNav subNav2">test2</div>
<div class="subNav subNav3">test3</div>
<div class="subNav subNav4">test4</div>
</div>
</div>
<div class="container">
</div>
<div class="left">
<div class="leftEles leftEle1"></div>
<div class="leftEles leftEle2"></div>
<div class="leftEles leftEle3"></div>
<div class="leftEles leftEle4"></div>
<div class="leftEles leftEle5"></div>
</div>
<div class="footer">
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
And CSS.
body{
overflow: hidden;
font-size: 20px;
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 50px;
background-color: #0092C7;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 50px;
width: 200px;
bottom: 0;
border-right: 1px solid #C0C0C0;
}
.container{
position: absolute;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
}
.leftEles{
width: 100%;
height: 50px;
background-color: #F4F3DE;
border-bottom: 1px solid #C0C0C0;
cursor: pointer;
}
.leftEles:hover{
opacity: 0.7;
}
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
}
.navTitle{
border-left: 1px solid #C0C0C0;
}
.subNav{
border-bottom: 1px solid #C0C0C0;
background-color: rgba(0,146,199,0.7);
cursor: pointer;
}
.subNav:hover{
color: #FFFFFF;
}
I'm curious why the hover and cursor effect on .subNav won't work!
Simple and silly question. Help me, many thx!
Your effect was not working because of .container is overlapping .header
Use z-index css on .header:
z-index: 2;
Complete css of .header
.header{
width: 100%;
height: 50px;
z-index:2;
background-color: #0092C7;
position: relative;
}
UPDATED DEMO
.container is positioned over navigation, has higher natural z-index (in code is after navigation).
To place navigation over container, set to navigation position: relative (only positioned elements (excluding position: static;) works with z-index) and higher z-index than 1.
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
position: relative;
z-index: 2
}
http://jsfiddle.net/4b2d0fyv/3/
This must be a very stupid question, but I can't get this media query to work. The page just doesn't change when I resize it.
stylesheet.css:
#font-face {
font-family: ubuntu;
src: url('Ubuntu-L.ttf');
}
#font-face {
font-family: ubuntu;
src: url("Ubuntu-B.ttf");
font-weight: bold;
}
html, body {
background-image: url('bg2.png');
background-repeat: repeat;
background-attachment: fixed;
font-family: ubuntu;
font-size: 48px;
margin: 0;
padding: 0;
text-align: center;
}
#menu {
width:900px;
height: 150px;
background: #FFF;
position: fixed;
left: 50%;
margin-left: -450px;
top: 50px;
}
#content {
width: 800px;
margin: 0px auto;
padding-top: 100px;
}
.block {
width: 100%;
height: 800px;
margin-top: 100px;
margin-bottom: 100px;
border-radius: 5px;
background: #FFF;
-moz-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
}
//MEDIA QUERY
#media screen and (max-width: 900px) {
#content {
width: 90%;
}
#menu {
width: 100%;
left: 0%;
top: 0%;
margin-left: 0px;
}
}
index.html:
<html>
<head>
<link rel="shortcut icon" href="http://www.yellos.com/favi.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>yellos</title>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="menu">
...
</div>
<div id="content">
<div class="block" id="1">
TEST
</div>
</div>
</body>
</html>
What am I doing wrong?
The error is that // comments aren't allowed in CSS.
Change
//MEDIA QUERY
to
/* MEDIA QUERY */