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.
Related
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/
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">
In my CSS parallax, I'm setting the <body> and <html> as follows:
#supports (perspective: 1px) { /* The parallax atmosphere */
html {
height: 100%;
overflow: hidden;
overscroll-behavior: none;
scroll-behavior: smooth;
}
html > body {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: none;
perspective: 1px;
transform-style: preserve-3d;
transform: translateZ(0);
scroll-behavior: smooth;
}
html > body:after {
content: "";
display: block;
clear: both;
}
}
Here's an example of the CSS for one of the parallax layers within (the important part):
#aF-background-layer-1 {
position: absolute;
z-index: -1;
overflow: hidden; /* Because it wraps an SVG */
}
#supports (perspective: 1px) {
#aF-background-layer-1 {
-webkit-transform: translateZ(-72px) scale(73);
transform: translateZ(-72px) scale(73);
will-change: transform;
}
}
There's more CSS, but that is just to give the layers their dimensions, colors, how to treat the SVGs inside and it all works beautifully. The problem is when you scroll to the bottom of the page. In Chrome scrolling stops when you reach the bottom of the <body>. In FireFox and Safari (not sure about IE/Edge or others), scrolling doesn't stop until you've reached to bottom of all elements. This can last for quite some distance if any of the elements are very far off in the distance (moving very slowly on scroll). So the question is:
How do I stop scrolling at the end of the <body>?
I can't just use overflow: hidden; on the <body> as the page won't even scroll. I prefer to do this with CSS, not JS. Here is a sandbox to play in:
https://codepen.io/joerhoney/pen/yRmeOL
In your html head specifying height as 200vh:
<head>
<meta name="viewport" content="width=device-width" height="200vh" user-scalable="yes" initial-scale="1.0">
</head>
change the height on the html and body in your css:
html {
height: 200vh;
}
html > body {
height: 200vh;
}
I'm not sure these are the numbers you want, but you need them to match up.
https://codepen.io/carolmckayau/pen/EdqwmL
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'm simply blocking out different images on a site right now using HTML and CSS and I'm having a problem with a symbol moving to the right of the screen at smaller resolutions.
The actual image I want (and that appears at 1600x1024 resolution) looks like so: http://i.imgur.com/hsGT14m.jpg
But at lower resolutions (1280x1024) it looks like: http://i.imgur.com/byeK41B.jpg
The HTML code for the whole page is as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="thrall.css">
</head>
<body>
<img src="images/background.jpg" width="1600" length="1200" class="bg">
<img src="images/titlebox.jpg" class="titlebox">
<img src="images/symbol.png" class="symbol">
<img src="images/transbox.jpg" class="transbox">
</body>
</html>
The CSS for the whole page is as follows:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -2;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
img.titlebox {
/*Keep it bounded for different resolutions*/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
/*Position*/
position: absolute;
top: 0;
left: 50%;
margin-left: -500px;
z-index: -1;
}
img.symbol {
/*Keep it bounded for different resolutions*/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
margin:auto;
/*Position*/
position: absolute;
top: 5%;
left: 20%;
}
div.containsymbol {
width:100%;
margin:auto;
}
img.transbox {
/*Keep it bounded for different resolutions*/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
/*Opacity*/
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
/*Position*/
position: absolute;
top: 21.5%;
left: 50%;
margin-left: -500px;
z-index: -1;
}
}
I gather that this is an issue with the symbol's absolute position and that relative positioning might be a solution, but I lack the experience to see how to bring about a resolution myself9and that might apply to which I'm not currently using).
I hope I've provided enough information here and look forward to any assistance anyone can give.
When you're using absolute positioning your parent element position should be relative otherwise it will be positioned relative to the body. according to your pictures your looking for something like this:
<html>
<body style="margin:0;background:url(images/background.jpg) no-repeat fixed;background-size:100% 100%;">
<div style="background:url(images/titlebox.jpg); width:80%; margin: 0 auto;">
<img src="images/symbol.png" style="width:auto;margin:5%" alt="symbol"/>
</div>
<div style="background-image:url(images/transbox.jpg); width:80%; margin: 0 auto;min-height:200px;">
</div>
</body>
</html>
also you can use css to set the color of your boxes instead of using img tags transbox.jpg and titlebox.jpg, it would make your site load faster.
Try this-
<img src="images/background.jpg" style="width:100%; height:1200px;" class="bg">
Maybe it works! If not please give 4 images used on your site.