I need my page to adapt from portrait to landscape for Iphone X without having to reload the page.
Here are the media Queries I use:
// Screen size variables
$screen-sm-min: 576px; // Small tablets and large smartphones (landscape view)
$screen-lg-min: 992px; // Tablets and small desktops
//$screen-lg-min: 1024px;
$screen-xl-min: 1200px; // Large tablets and desktops
// Mixins
#mixin xs { #media (max-width: #{$screen-sm-min}),
(min-device-width : 375px) and (max-device-width : 667px),
(min-device-width : 414px) and (max-device-width : 736px),
(min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3)
{#content;} } // Tiny devices
#mixin md { #media (max-width: #{$screen-lg-min}), (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-height : 1024px) and (max-device-width : 1366px)
{#content;} } // Medium devices
And here is a link to the page:
http://dev2.lemeilleurducbd.com/location_etu/home.html
I have looked on Google but I could not find an answer to this issue.
Thanks for your help
CSS solution
You can use orientation in media queries.
landscape rules apply when the browser window width is greater than height:
#media (orientation: landscape) {
...
}
portrait rules apply when browser window height is greater than width:
#media (orientation: portrait) {
...
}
JS solution (Source)
Note: Unfortunately this feature is not supported in safari.
You can listen to the orientationChange event for when the orientation changes, and read screen.orientation when you need to know the current orientation.
screen.addEventListener("orientationchange", function () {
console.log("screen orientation: " + screen.orientation);
});
Another option would be to listen to window resizes and compare the ratio of width and height.
if (width/height > 1) { //landscape } else { portrait }.
I recommend throttling the window resize listener.
I put a piece of javascript on the body tag, that was adapting the body width according to the windowWith, this is what was preventing to go on landscape mode without reloading the page..
Related
I am not 100% clear on how to implement images for mobile only view that are different than the ones I have for desktop view
So for example, if I have this image for desktop:
&.card {
.card-image {
#include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
}
}
which comes from the mixin file where I have this code:
#mixin background-helper($image: false, $position: center, $size: contain, $repeat: no-repeat){
#if $image {
background-image: asset-url($image);
background-repeat: $repeat;
background-size: $size;
background-position: $position;
}
}
Not sure what logic to add that would tell my application to render something other than old-pic.jpg if the user is viewing it on a mobile phone.
It seems you have to use media queries.
for example:
$break-small: 320px;
$break-large: 1200px;
.card-image {
#media screen and (max-width: $break-small) {
#include background-helper('gallery/mobile-pic.jpg', center, contain, no-repeat);
}
#media screen and (min-width: $break-large) {
#include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
}
}
I have a Tumblr page where all the images have the same width
img.photo_img {max-width: 500px}
is there a way to style differently the portrait and the landscape ones
maybe working on their aspect ratio?
I would love to have:
PORTRAIT: width 500px
LANDSCAPE: width 750px
Thanks.
you can do this with media queries
#media all and (orientation:portrait) {
img.photo_img{max-width:500px;}
}
#media all and (orientation:landscape) {
img.photo_img{max-width:750px;}
}
view an example here
Can we change the background color used for the bars which display on top and below a video, when a video doesn't fit the screen?
By default it is a dark gray, which is very distracting.
I tried this to see if it can be changed at all. But it didn't change:
.background {
background: center no-repeat url(my_background_url)
background-color: rgb(255, 255, 255);
...
}
Adding this to your custom stylesheet will do the trick:
#player video {
background-color: black;
}
However, I think Google should not set a background-color on the video element (currently #111 I think)
This is kind of simple, when compiling the following code fails with the error:
Line 6 of media.scss: Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was "$desktop
Here is the code (as simple as possible):
$desktop: 1920px;
$tablet: 1024px;
$phone: 480px;
// Style adjustments for desktop size
#media (min-width: $desktop) {
}
// Style adjustments for tablet size
#media (min-width: $tablet) and (max-width: $desktop) {
}
// Style adjustments for phone size
#media (max-width: $phone) {
}
Is this a bug? Maybe it's not possible to use variables in media queries with SASS.
No problem with the code. Variables are possible in SASS 3.2. Link
I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.
I would just like to clarify that I have the media queries set up correctly before I change out all my background images.
I have doubled the size of all my background images and perfixed
them with the "#2x" naming convention. e.g icon-user#2x.png.
I have added a jQuery function into my code to swap out the images with the CSS class of hires.
In my CSS document I have a normal CSS class for a background image.
Normal CSS query
.side-nav .arrow {
background: url(../images/arrow-nav.png) no-repeat top left;
width: 5px;
height: 8px;
display: inline-block;
margin-left: 10px
}
Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?
/* All Retina Ready devices larger than 1.5 pixel ratio */
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
-webkit-background-size:5px 8px;
-moz-background-size:5px 8px;
-o-background-size:5px 8px;
background-size:5px 8px
}
}
jQuery Code
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
/* loop through the images and make them hi-res */
for(var i = 0; i < images.length; i++) {
/* create new image name */
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "#2x" + imageType;
/* rename image */
images[i].src = imageName;
}
}
});
Thank you
As long as there is some form of scaling taking place, like when you declare
<meta name="viewport" content="width=..."> (for android/ios/blackberry/WP8)
or
#ms-viewport {width: ... ;} (for non-WP8 IE10)
or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px
then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI
this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
}
}