Please can someone point me in the right direction! I can't get the queries to work as intended.
So, I have for example:
<link rel="stylesheet" href="/480.css" type="text/css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="/768.css" type="text/css" media="screen and (max-width:768px)" />
<link rel="stylesheet" href="/960.css" type="text/css" media="screen and (min-width:960px)" />
In the 480 stylesheet:
#box{width:100px;height:100px;}
In the 960 stylesheet:
#box{width:200px;height:200px;}
When I resize the browser to 480px or less the 960 style is overriding the 480 style. I have tried loading all queries in the one stylesheet and I've tried using separate stylesheets for different resolutions but still not working. When testing it in either Chrome or FF Aurora it makes no difference.
What am I doing wrong? Thanks!
Works perfectly for me:
http://felixebert.de/so-12811458/
Is the path to the css files correct?
Is the HTML Doctype correct (<!DOCTYPE html>)?
Do you mix an id-reference with a class-reference? (#box = <div id="box" />, .box = <div class="box" />)
What's in 768.css?
Try this:
<style>
#media screen and (max-device-width: 480px),
screen and (max-width: 960px) {
#box{width:100px;height:100px;outline:1px solid red;}
}
/* Still small! (but scaling up) */
#media screen and (min-width: 960px) {
#box{width:200px;height:200px;outline:1px solid red;}
}
</style>
http://jsfiddle.net/sthAngels/EecJD/
Related
My index.html contains links to sass files
<head>
<link rel="stylesheet" href="#/sass/reset.sass" />
<link rel="stylesheet" href="#/sass/keyframes.sass" />
<link rel="stylesheet" href="#/sass/classes.sass" />
</head>
When try to build, get errors This selector doesn't have any properties and won't be rendered. for all rows in all sass files
part of classes.sass
.ripple
width: 0
height: 0
#include border-radius(50%, 50%, 50%, 50%)
#include themed
background: t('link-active-bg')
transform: scale(0)
position: absolute
opacity: 1
&-effect
animation: ripple .45s linear
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<video controls autoplay>
<source src="./test.mp4" type="video/mp4"/>
<track default kind="captions" srclang="en" label="English" src="./test.vtt"/>
</video>
</body>
</html>
CSS
.yellowish {
background-color: blue;
color: yellow;
}
.redcolor {
background-color: white;
color: red;
}
VTT
WEBVTT
00:00:00.000 --> 00:00:03.000
<c.yellowish>This text should be yellow.</c> This text will be the default color.
00:00:03.000 --> 00:00:06.000
<c.redcolor>This text should be red.</c> This text will be the default color.
I hosted them on a simple http server with node.js and tried it on chromium and Firefox.
They did not show colors.
I tried including styles in the vtt file, it did not work either.
Size and colors seems to be not working in Firefox and chromium.
Alignment doesn't work in chromium.
All other webvtt features work perfectly.
Am I supposed to use any front-end frameworks for this?
It works on YouTube perfectly.(1:30 to 1:40)
I created a processing JS code in an external IDE from my HTML and I want to put it on my HTML page. I went through many tutorials but I could not figure out why I have the following problem.
My 600x600 project should look like this:
Working
When I embed it on my website it looks like this:
Not Working
This is my HTML:
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="https://mhs-robotics.com/style/point-counter.css">
<script type="text/javascript" src="https://mhs-robotics.com/java/processing.js"></script>
</head>
<body>
<center>
<canvas id="can" width="10px" height="10px" data-processing-sources="https://mhs-robotics.com/java/counter.pde"></canvas>
</center>
</body>
This is my CSS:
#can {
width: 600px;
hight: 600px;
margin: auto;
border: 5px solid black;
}
I fixed it
I added:
void setup() {
size(600, 600);
}
I have created a full screen background image website using css, however when I try and also link bootstrap it creates a white, full screen container covering the entire page. When I go into the bootstrap CSS and comment the whole thing out the white container remains. The only way to get rid of it is to remove the bootstrap link from my head tag. Below is the HTML then the CSS.
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="local.css" rel="stylesheet"/>
</head>
html{
background:url('img/50925.jpg') no-repeat center center;
min-height:100%;
background-size:cover;
}
body{
min-height:100%;
}
Anyone got any ideas?
Set the background of the body to be fully transparent with
background-color:rgba(0, 0, 0, 0.0);
jsfiddle: https://jsfiddle.net/o9mgygzu/
I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views.
Example repository available at: https://bitbucket.org/neogucky/polymer-dialog-problem/
DialogView: view.html
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">
<polymer-element name="test-view">
<template>
<paper-dialog id="extendedNode" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true class="noTitle">
<content>
<core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
<section id="0">
<br><br>
<p cross-fade>Click next to see the secret text.</p>
</section>
<section id="1">
<br><br>
<p cross-fade >This text is a secret, so don't tell Firefox users!</p>
</section>
</core-animated-pages>
</content>
</paper-dialog>
</template>
<script type="application/dart" src="view.dart"></script>
</polymer-element>
CSS-file:
html /deep/ paper-dialog {
margin-top: -150px;
margin-left: -300px;
}
html /deep/ paper-dialog /deep/ core-animated-pages{
height: 300px;
width: 600px;
}
Expected behavior: Upon page load a 300px x 600px dialog should popup with a button at the bottom left.
Behavior in Firefox: A small dialog is shown and resembles the dialog in chrome when there is no size set in the css file.
I would like to confirm if this is my fault for using incorrect CSS hooks or if this seems to be a polymer problem with Firefox.
If you CSS is not inside a Polymer element you need to add the polyfill version of the selectors to make it work on browsers without native shadow-DOM support
html paper-dialog,
html /deep/ paper-dialog {
margin-top: -150px;
margin-left: -300px;
}
html paper-dialog core-animated-pages,
html /deep/ paper-dialog /deep/ core-animated-pages{
height: 300px;
width: 600px;
}
See https://www.polymer-project.org/0.5/docs/polymer/styling.html and https://www.polymer-project.org/0.5/articles/styling-elements.html for more details