I tired many ways, but I can't get this media query to work.
"#Content" just doesn't change left position when I resize the window !
must be a way to make it run correctly !
Here's the code:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>index</title>
</head>
<body>
<div id="layout">
<div id="fixed-sidebar">
</div>
<div id="content">
content to make error visible !
</div>
</div>
</body>
</html>
style.css
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#layout {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#fixed-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 460px;
background-color: rgb(33, 40, 46);
overflow: hidden;
padding: 20px;
color: white;
}
#content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 460px;
overflow-y: scroll;
padding: 20px;
background-color: lightgrey;
}
#media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#Content { left: 460px; }
}
#media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#Content { left: 40%; }
}
Here is a jsfiddle: http://jsfiddle.net/X3U2f/1/
What I'm doing wrong ? :/
(PS: I tried to put them important but still ignoring left position !)
Thank you
"What I'm doing wrong ? :/ "
You're using a capital 'C' for the ID within the #media rules, but class and ID attribute values are case-sensitive in HTML, so you'll need to change #Content to #content:
#media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#content { left: 460px; }
}
#media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#content { left: 40%; }
}
http://jsfiddle.net/X3U2f/
Related
I am trying to create a page with a slot machine and I have some issues when I am trying to make it responsive. At some point it gets cut off when going to smaller devices. Also I think that I made it a bit complicated , I hope you guys understand my mess of a code. thanks a lot
* {
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.background {
background: url("bg.jpg");
height: 500px;
padding: 270px 0;
height: 100%;
background-repeat: no-repeat;
width: 100%;
}
.all-parts {
margin: auto;
height: 300px;
width: 50%;
position: relative;
}
.slot-machine {
background: url("slot-machine.png");
background-repeat: no-repeat;
height: 500px;
width: 100%;
position: absolute;
}
.free-spins {
background: url("freespins-banner.png");
background-repeat: no-repeat;
height: 100px;
position: absolute;
top: 150px;
left: 370px;
z-index: 3;
width: 60%;
}
.click-to-spin {
background: url("diagonal-strip.png");
background-repeat: no-repeat;
position: absolute;
z-index: 3;
top: 450px;
width: 100%;
height: 130px;
background-size: cover;
}
.click-to-spin p {
text-align: center;
margin-top: 70px;
font-size: 40px;
color: rgb(247, 241, 198);
}
.first-slot img {
margin-top: -1180px;
margin-left: 215px;
width: 120px;
}
.second-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
.third-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
first-slot,
.second-slot,
.third-slot {
float: left;
}
.slot-machine-wrapper {
overflow: hidden;
height: 150px;
margin-top: 60px;
}
#media only screen and (max-width: 1400px) {
body {
background-color: red;
}
.all-parts {
width: 100%;
display: table;
}
.slot-machine {
width: 100%;
}
}
<div class="background">
<div class="all-parts">
<div class="slot-machine">
<div class="slot-machine-wrapper">
<div class="first-slot">
<img src="slot-strip.png">
</div>
<div class="second-slot">
<img src="slot-strip.png">
</div>
<div class="third-slot">
<img src="slot-strip.png">
</div>
</div>
</div>
<div class="free-spins">
</div>
</div>
<div class="click-to-spin">
<p>Click to spin!</p>
</div>
</div>
i will suggest you use css #media queries to break points, for example
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:200px;
width:70%;
position: absolute;
}
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:250px;
width:80%;
position: absolute;
}
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
just place the css value that will likely change accross devices in each #media queries above, also remember to have this in your meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I am trying to create a responsive design and using the position absolute to place my image in the right position. Now, is there a way to "lock down" two images to resize together with the size of the screen? I have to keep adjusting the image position using the #media query.
It's driving me insane now. What I want to achieve is both images to move together at the same time.
Have a look at this Fiddle or see the demo below:
body {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
left: 0;
top: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
max-width: 1200px;
}
.container {
display: inline-block;
max-width: 900px;
}
.absolutecontainerliquids {
height: 450px;
}
.basecloudcontainer {
position: relative;
}
.paddingtop {
padding-top: 30px;
}
.liquids {
position: absolute;
left: 10%;
z-index: 10;
width: 80%;
}
.cloud {
position: absolute;
left: 0%;
width: 100%;
z-index: 1;
}
.darkgrey {
background-color: #262626;
}
.lightgrey {
background-color: #cfcdc7;
}
.page1 {
z-index: 10;
}
.page2 {
padding-top: 40px;
}
.firstimagetabletlogostripes {
display: none;
}
.firstimagelogobottom {
display: none;
}
.firstimagelogo {
width: 64%;
left: 18%;
top: 27%;
position: absolute;
z-index: 1;
}
.blacktext {
color: black;
}
.paragraph {
text-align: center;
padding: 0 30px;
}
#media screen and (min-width: 340px) {
.firstimagelogo {
width: 65%;
top: 25%;
}
}
#media screen and (min-width: 500px) {
.firstimagelogo {
width: 30%;
top: 30%;
left: 35%;
z-index: 10;
}
.firstimagemlogostripes {
visibility: hidden;
}
.firstimagetabletlogostripes {
display: block;
position: absolute;
left: -35%;
top: 0%;
z-index: 2;
width: 120%;
}
}
#media screen and (min-width: 600px) {
.firstimagetabletlogostripes {
top: -10%;
left: -40%
}
}
#media screen and (min-width: 700px) {
.wrapper {
overflow: visible;
}
.absolutecontainerliquids {
height: 650px;
}
.firstimagetabletlogostripes {
top: -20%;
left: -45%;
width: 130%;
}
}
#media screen and (min-width: 800px) {
.firstimagetabletlogostripes {
top: -50%;
left: -50%;
width: 130%;
}
}
#media screen and (min-width: 900px) {
.firstimagetabletlogostripes {
top: -50%;
left: -50%;
width: 130%;
}
}
#media screen and (min-width: 1000px) {
.firstimagetabletlogostripes {
top: -60%;
left: -30%;
width: 120%;
}
.firstimagelogo {
width: 20%;
top: 25%;
left: 40%;
z-index: 10;
}
.firstimagelogotop {
display: block;
position: absolute;
top: -0%;
left: 70%;
width: 40%;
}
.firstimagelogobottom {
display: block;
position: absolute;
top: 70%;
left: 15%;
width: 40%;
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Base - E-Liquid</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper darkgrey page1">
<div class="container">
<img class="firstimagemlogostripes" src="https://image.ibb.co/g5WJ66/mlogostripes.png" />
<img class="firstimagetabletlogostripes" src="https://preview.ibb.co/gFnrR6/stripes.png" />
<img class="firstimagelogo" src="https://image.ibb.co/gsPGtm/logofilled.png" />
<img class="firstimagelogobottom" src="https://preview.ibb.co/gkXEeR/imagelogobottom.png" />
</div>
</div>
<div class="wrapper lightgrey page2">
<div class="container absolutecontainerliquids">
<div class="paragraph blacktext">
<p>Ecstatic advanced and procured civility not absolute put continue. Overcame breeding or my concerns removing desirous so absolute. My melancholy unpleasing imprudence considered in advantages so impression. Almost unable put piqued talked likely
houses her met. Met any nor may through resolve entered. An mr cause tried oh do shade happy.
</p>
</div>
</div>
</body>
</html>
This is the HTML:
<div class="bck">
<div class="image-1"></div>
</div>
And CSS:
.bck {
background-image="image url"
}
.image-1 {
margin-top: 40px
margin-left: 40px
}
You can use div tag and put your both image in it. If you are using external css then create a class and apply that class to both of images.
Update:
This is Html file:
<div class="bck">
<div class="image-1"></div>
</div>
And css:
.bck{
background-image="image url"}
.image-1{
margin-top: 40px
margin-left: 40px}
I can't seem to hide the #right image on my iPhone. I want it to display on my webbrowser, but not on small phones.
Edit I've tried visibility: hidden !important;
I've tried screen and
I've tried display: none
I've tried hiding by class name
Thanks!
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style>
html {
width: 470px;
height: 725px;
}
div {
position: absolute;
left: 150px;
top: 75px;
width: 70%;
}
#left {
width: 300px;
height: 700px;
}
#right {
position: absolute;
width: 300px;
height: 700px;
right: 10px;
z-index: -1;
}
#title {
position: absolute;
top: 10px;
left: 31%;
width: 330px;
height: 90px;
}
#rightP {
position: absolute;
width: 75%;
left:30px;
}
#cross {
position: absolute;
top: 610px;
left: 48%;
width: 30px;
height: 30px;
}
#media screen and (max-width: 600px) {
#right{
display: none !important;
visibility: hidden !important;
}
.mobile-hide {
display: none;
visibility: hidden;
}
}
body {
min-width: 300px;
background-color: #f1e2c1;
}
</style>
<body link="#000000" vlink="#808080" alink="#FF0000">
<img id="title" src="images/title.jpg">
<img id="left" src="images/left.jpg">
<img class="mobile-hide" id="right" src="images/right.jpg">
<div>
<p >
</p>
</div>
<img id="cross" src="images/cross.jpg">
</body>
</html>
In the code of the stylesheet on your website, you have this line above your media queries:
//small screen sizes
// is NOT to be used for CSS comments ( but only in PHP and JS)! In fact, this messes up your code, since the browser thinks it's some kind of CSS and can't handle it (and all the other code following it).
So just change that line to
/*small screen sizes*/
and it will work.
I strongly recommend you not to use id's while using css as classes tend to do all the work required without that level of specificity, for this example all you need to do is switch the display with visibility
#media screen and (max-width: 600px) {
#right {
visibility: hidden !important;
}
}
Hope This helps!
Add a media query for that specific element, or create a class called mobHide and create something like the following
Element
#media screen and (max-width: 767px) {
#right {
display: none !important;
}
}
Class Specific - Apply .mobHide class to anything you want removing on mobile devices.
#media screen and (max-width: 767px) {
.mobHide{
display: none !important;
}
}
I have a problem with the display: none and visibility options in HTML/CSS
I have the scenario set up here
https://jsfiddle.net/vntkpus6/5/
HTML:
<!doctype html>
<body>
<div class="grabber"></div>
</body>
</html>
CSS:
#media (max-width: 800px) {
.grabber {
display: block;
visibility: visible;
}
}
.grabber {
display: none;
position: fixed;
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat
}
There must be something I must be missing, it seems like when I resize the window to 800px the square should become visible, yet it doesn't work.
Can anybody tell me what I'm doing wrong? Thanks
Move your #media query below the .grabber rule set. What is happening is that your second definition of .grabber is overriding what is in the media query. It's just the way CSS works!
You should to use min-width, it mean "if the width more than 800px use it"
#media (min-width: 800px) {
.grabber {
display: none;
}
}
.grabber {
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat
}
Here you should use media query after .grabber.Please let me know after doing in below way all things work perfectly or not.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>OFFSET</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="grabber"></div>
</body>
</html>
CSS CODE:
.grabber {
display: none;
position: fixed;
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat;
}
#media all and ( max-width: 800px) {
.grabber {
display: block;
visibility: visible;
}
}
#media screen and (min-width: 300) and (max-width: 800px) {
#top {
font-size: 200%;
}
#first {
width: 30%;
height: 20%;
font-size: 120%;
position: relative;
top:40%;
}
#second {
float: right;
width: 30%;
height: 20%;
font-size: 120%;
position: relative;
top: 20%;
}
#quote {
position: relative;
left: 10%;
}
#bannertextb{
font-size: 250%;
margin-left: 0;
}
#sps {
font-size: 180%;
position: relative;
top: -08%;
margin-left: 0;
}
#class {
margin-left: 0;
}
#greek {
font-size: 350%;
margin-left: 0;
}
#banner {
height: 30%;
}
}
I wish to change the widths when opened from a phone.But this doesnt seems to happen.
But when i re-size my browsers window, everything works fine..
You can view the whole website #- This link
Reduce the min and max width and then try it.
Try using this tag inside your <head> of your html .
<meta charset="utf-8" content="width=device-width, minimumscale=1.0" name="viewport">
use the following code instead of your media query
#media screen and (min-device-width: 300px) and (max-device-width: 800px){
//your code goes here
}
Use like this
#media screen and (max-width: 800px)