For screen > 1000px I want to utilize :checked effect(pseudo class). When the input is checked, an adjacent div background color changes to light-blue. When unchecked the background color changes to grey.
In smaller screen (<=1000px), I want to remove everything specified by the :checked pseudo class. This means no color change upon check/uncheck.
But I cant make it work.
In other words I want to utilize :checked in screen > 1000px and for smaller screen I need behaviour like the previous :checked declaration never existed. Here is an example:
https://jsfiddle.net/rikotech/r7cmbayp/2/
And some code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background:rgb(100,100,100);
/* width: 500px;
height: 500px; */
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
position: absolute;
}
.toggle-label{
cursor: pointer;
}
.toggle:checked ~ .container {
background: rgb(100,200,200);;
}
#media screen and (max-width: 1000px){
/* I want to remove .toggle:checked ~ .container behavior here
I dont want checking to change the color or do anything at this screen
*/
.toggle:checked ~ .container {
all: unset; /*This doesnt work it just initialize the bacground color*/
}
}
</style>
</head>
<body>
<div>
<label class="toggle-label" for="toggle">Hamburger</label>
<input type="checkbox" id="toggle" class="toggle">
<div class="container"></div>
</div>
</body>
</html>
Instead of using a media query to unset :checked pseudo class in smaller screens, why not write a media query to use :checked pseudo class only in larger screens.
CSS:
.container{
background:rgb(100,100,100);
/* width: 500px;
height: 500px; */
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
position: absolute;
}
.toggle-label{
cursor: pointer;
}
#media screen and (min-width: 1000px){
.toggle:checked ~ .container {
background: rgb(100,200,200);
}
}
https://jsfiddle.net/su2hyLkb/
Related
i tried to style my screen size in the #media tag but the contain in my page is still not responsive at all. What can i do to make it responsive other than bootstrap? The below code is my css code that i added into my project. Thank you in advance.
#media screen and (max-width: 600px) {
body{
position: absolute;
width: 411px;
height: 823px;
left: 0px;
top: 0px;
background: #00644C;
font-family:Inter;
}
}
.container {
width: 309px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
label {
color: #FFFFFF;
display: flex !important;
padding-left: 70px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: normal !important;
}
.btn.btn-block{
background: #FFFFFF;
border-radius: 2px;
}
input[type=submit] {
width: 20em !important;
height: 2em;
}
Try to add this code into your head section of your html. This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
I'm a visual designer struggling to code, to cut to the chase, below is the problem:
What I'm trying to achieve:
Goal 1 and Goal 2 screenshots, including my current dilemma, I've placed a link below (as I'm not allowed to include screenshots yet as I am a newbie:
https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0
What I was hoping to achieve was to have the navigation bar centered all the time. I made it wide (1300px), my white container will be smaller, anything outside of it will be set to hidden.
Below is my code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class ="main-container">
<div class = "banner-container">
<div class="cyan-banner"></div>
<div class="green-banner"></div>
<div class="magenta-banner"></div>
<div class="orange-banner"></div>
</div><!--end of .banner-container-->
</div><!--end of .main-container-->
</body>
</html>
#import 'normalize';
#import 'susy';
#import 'compass';
$susy : (
columns: 12,
debug: (image: show),
output: overlay
);
.main-container {
#include clearfix;
#include container(1200px);
height: 100vh; // Forces wrap to full height.
// Mobile
#media (max-width: 419px) {
#include show-grid(1);
}
// Changing to a 4 column grid
#media (min-width: 420px) {
#include show-grid(4);
}
// Changing to a 8 column grid
#media (min-width: 841px) {
#include show-grid(8);
}
// Changing to a 12 column grid
#media (min-width: 1200px) {
#include show-grid(12);
}
}
// Color Theme
$cyan: #148ec3; $magenta: #c9197a; $orange: #de8826; $green: #008a52; $gray: #a1a1a0;
body {
background: #d2d2d2;
}
.main-container {
background: white;
}
.banner-container {
#include clearfix;
}
.banner-container > div {
width: 1300px;
position: fixed;
top: 50px;
}
.cyan-banner {
height: 60px;
background: $cyan;
z-index: 5;
}
.green-banner {
height: 60px;
background: $green;
z-index: 4;
#include transform(rotate(2deg));
}
.magenta-banner {
height: 60px;
background: $magenta;
z-index: 3;
#include transform(rotate(4deg));
}
.orange-banner {
height: 60px;
background: $orange;
z-index: 2;
#include transform(rotate(-2deg));
}
Any help or suggestions would be greatly appreciated.
I've been scouring the forums for answers and leads but I can't seem to find one that has a similar problem as mine.
Thank you again.
Anthony
With one nav and a couple of rotated and translated (and suitably positioned) pseudo elements.
html,
body {
height: 100%;
}
.container {
width: 80%;
height: 100%;
overflow: hidden;
margin: 0 auto;
border: 1px solid black;
}
nav {
height: 75px;
background: steelblue;
margin-top: 75px;
position: relative;
}
nav:before {
content: '';
position: absolute;
width: 150%;
height: 100%;
background: orange;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)rotate(-2deg);
z-index: -1;
}
nav:after {
content: '';
position: absolute;
width: 150%;
height: 100%;
background-image: linear-gradient(to bottom, magenta 0, magenta 25%, green 25%, green, 75%, magenta 75%, magenta);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(3deg);
z-index: -1;
}
<div class="container">
<nav></nav>
</div>
Note that at the moment the 'green' area is only visible at larger screen sizes but media queries could increase the rotation. Alternatively, we may be able to do something with a more refined gradient.
I need to fix landscape orientation for mobile website, so I'm using #media (orientation: portrait) {}. But I have one issue that I can't find solution: after using body transform - children items displaying outside box. Below there is a full example. You can save it and run in FF or chrome with mobile emulation (right-click at page, then "inspect element", then change emulation type).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
* {margin: 0; paddin: 0}
html {position: relative; height: 100%}
body {background: #ccc; position: relative; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 30px}
.box {background: #777; position: relative; width: 100%; height: 100%}
#media (orientation: portrait) {
body {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top;
transform: rotate(90deg);
transform-origin: left top;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
So, idea is to display .box in portrait mode like it comes in landscape - overlay on lightgray body with right padding. Here is image example how it must be: http://screencloud.net/v/EOXO
I forgot about this question. But I found solution and maybe it could be helpful for someone. Here is a working code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
* {margin: 0; padding: 0}
body {background: #ccc; position: relative; width: 100vw; height: 100vh; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 30px}
.box {background: #c00; position: relative; max-width: 100%; height: 100%}
#media (orientation: portrait) {
body {
transform: rotate(90deg) translateY(-100%);
transform-origin: left top;
width: 100vh;
height: 100vw;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
So. First of all, I've changed dimensions to viewport relative values (100vh = 100% from viewport height and 100vw = 100% from viewport width).
Then, when I'm using a transformation into portrait orientation, I forgot about that width must become height and height = width.
Also, if I'm using a transform-origin property, it rotates as it sould - based on left top corner. So, it must be negative translated to be visible.
Hope this solution will be helpful for someone.
So I noticed that there's a problem with the document height of Safari in iOS7 on an iPhone. I've seen a bunch of threads about the iPad, but nothing about the iPhone.
For some reason it does not display the full height of the document.
Here's a JSBin demo:
http://jsbin.com/bohociyo/1
Markup + CSS for reference:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iPhone iOS7 bug</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body></body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
background: #fff;
color: #000
}
body::before {
display: block;
text-align: center;
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 9999;
padding: 5px;
white-space: pre; /* or pre-wrap */
}
#media only screen and (orientation:portrait) {
body::before {
content: "Portrait \A Works as intended.";
}
}
#media only screen and (orientation:landscape) {
body::before {
content: "Landscape \A Does not display the full height of the document. \A Grey bar appears.";
}
}
A simple window.scrollTo(0, 0); on orientation change seems to have fixed it.
It's the minimal ui metag tag that's causing the bug.
window.addEventListener("orientationchange", function() {
window.scrollTo(0, 0);
}, false);
I have the following CSS setup up on my site. I'd like for it to be disabled when a browser width gets narrower than 900 px, but to remain enabled when a browser width is greater than 900. Any suggestions on how I can do this?
Thanks!
.image-slide-title {
display: block !important;
height: 100%;
width: 100%;
position: absolute;
top: 1;
z-index: 2000;
font-family: "open sans";
font-size: 100%;
font-weight: 100;
margin-bottom: 100px;
line-height: 1.8;
color: #333
}
Don't forget to add the html tag for smaller devices:
HTML
put the following meta inside your page head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
CSS
.image-slide-title {
display: block !important;
height: 100%;
width: 100%;
position: absolute;
top: 1;
z-index: 2000;
font-family: "open sans";
font-size: 100%;
font-weight: 100;
margin-bottom: 100px;
line-height: 1.8;
color: #333
}
#media screen and (max-width: 900px) {
.image-slide-title {
/* do what you want here */
display: none !important;
}
}
Honestly, if you can remove the important tag, it will be much more simpler to manage the responsive effect
I believe you're looking for media queries.
#media (max-width: 899px) {
.image-slide-title {
display: none !important;
}
}
Don't forget to do this on your html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
My recommendation is to create a secondary css page for your mobile.
<link rel="stylesheet" media="screen and (min-width: 901px)" href="style.css" />
<link rel="stylesheet" media="screen and (max-width: 900px)" href="mobile-style.css" />
Then in that stylesheet have the settings specific to that.
Just you need to add media query
#media screen and (max-width: 1200px) {
.div-name {
width: max-content !important;
}
}
This usage avoid to rescale your flex system and you achieve a solid structure does not effect screen resizing