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 */
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>
It is a copied code from an exercise, but I don't know why the header sets -30px beyond the right boarder of the viewport (doesn't happen on the video tutorial). I have tried applying 30px to the right, but it counts from 0 not from that additional pixels I got as a gift.
The Internet hasn't shown me any answers yet..
Please help.
As seen here it adds 30px on the right hand side, so the header (100% width) goes outside the viewport:
snapshot
#charset "UTF-8";
header {
width: 100%;
height: 88px;
position: fixed;
right: auto;
padding: 15px;
top: 0;
left: 0;
z-index: 5;
background: #FF825C;
box-shadow: 0px 2px 4px #EA6044;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
header input {
width: 100%;
height: 50px;
float: left;
background: #FFA473;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border: 0px;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ToDoList app</title>
<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>
<header>
<input type="text" placeholder="Enter an activity...">
<button type="button" name="button"></button>
</header>
</body>
</html>
That happens because you set the padding for all sides. Try to put right padding only and check:
#charset "UTF-8";
header {
width: 98.5%;
height: 88px;
position: fixed;
padding: 15px;
top: 0;
left: 0;
z-index: 1;
background: #FF825C;
box-shadow: 0px 2px 4px #EA6044;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
header input {
width: 99.5%;
height:50px;
float: left;
background: #FFA473;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border: 0px;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ToDoList app</title>
<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>
<header>
<input type="text" placeholder="Enter an activity..."/>
<button type="button" name="button"></button>
</header>
</body>
</html>
So I want the link at the bottom of my page to have a bigger font-size on screens smaller than 580px (which should obviously be nearly all phone screens).
If I check it in dev tools and change the width it looks fine like this
but once I use 'phone screen mode' and for example iPhone 5 it's back to the normal font-size of 25px, what the media query should've increased?
body{
font-family: Raleway;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/****************************/
img{
width: 96%;
margin: 2%;
}
/*********** Footer Section **************/
#link-back a, #link-back p{
color: #666666;
font-family: Raleway;
font-weight: bold;
text-decoration: none;
float: none;
text-align: center;
padding-top: 10px;
font-size: 25px;
margin: 10px 0 -10px 0;
display: block;
}
#link-back::before
{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 50px;
background:#666666;
opacity: .4;
}
:hover#link-back a {
color: red;
}
#copyright p, #copyright{
text-align: center;
float: none;
margin: 0 0 5px 0;
padding: 0;
color: #b7b7b7;
font-size: 13px;
}
#media all and (max-width: 580px){
#link-back a, #link-back p{
font-size: 45px;
padding-top: 15px;
}
#link-back::before{
height: 80px;
{
}
<html>
<head>
<title>Typographic Pairing</title>
<link rel="icon" type="image/png" href="../img/heart.png">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
</head>
<body>
<img src="http://heartcube.co.uk/typographic-pairing/project2.jpg" alt="project 2">
<p id="copyright">© 2017 Bettina Bremm</p>
<p id="link-back">back to heartcube</p>
</body>
</html>
As #CBroe noticed, the meta tag was missing for the viewport!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The div with id="intro" is supposed to be hidden but it shows. The main container, which is div with "id=myQuiz", has width and height 650px and 'overflow' set to 'hidden'. Now, if the div with "class=intro" has margin 660px from the left, it should be hidden because it's margin is higher than the maximum width of the main container. My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Your Knowledge: Saturn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz">
<h1>Test your knowledge:<span>Saturn</span></h1>
<div class="progress"></div>
<div class="intro"></div>
<h2>Welcome</h2>
<p>Click begin to test your knowledge of Saturn</p>
<p class="btn">Begin</p>
<div class="question"></div>
<div class="results"></div>
</div>
</body>
</html>
CSS code is as follows:
#import url(http://fonts.googleapis.com/css? family=Titillium+Web:900|Roboto:400,100);
body { background-color: #fff; padding: 20px; }
#myQuiz {
font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
width: 650px; height: 650px;
position: relative;
overflow: hidden;
color: #fff;
background: #000 url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h2 { font-size: 3em; margin: 0px; font-weight: 100;}
#myQuiz h3 { font-size: 2.4em; margin: 0px; font-weight: 100;}
#myQuiz p { margin: 0px 0px 40px 0px;}
#myQuiz .btn {
display: inline-block; cursor: pointer; background-color: #c04b01;
color: #fff; text-decoration: none;
padding: 5px 15px; border-radius: 6px;
}
#myQuiz .intro { position: absolute; top:225px; left: 660px; width: 550px;}
#myQuiz .intro p { margin: 0px 0px 40px 0px; }
Here is the link to my code on jsfiddle.net:
https://jsfiddle.net/h02y8usu/
You should hide the <div class="intro"> by adding display: none property to .intro
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>