Hey guys i am trying to stick my website screen to be portrait only but it not working properly using this css query it affect the height of my website. is there any other solutions to lock the website to be only portrait?
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
position: absolute;
top: 100%;
left: 0;
}
}
Related
I can't figure out how to serve different image for mobile users - my banner become too small to read. I am kinda new to this. I successfully managed to put banner image where it should be using bootstrap, with help of following css code:
.jumbotron{
margin-top: 5px;
background-image: url(obr/head.jpg);
background-size: cover;
height: 100%;
background-size:100% auto;
background-repeat: no-repeat;
min-height: 320px;
}
and html
<header class="jumbotron">
</header>
Note that I had to set min-height: 320px; because it was the only way to display banner in correct size (apart from adding br's in header tag). On mobile, banner is small to read and also creates white space because of min-height..
I tried to serve different image for mobile users using this css code:
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
.jumbotron{
background-image: image-url("obr/head.jpg");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
.jumbotron{
background-image: image-url("obr/head.jpg");
}
}
but no luck. Can anyone help me sorting this out? I prefer easy to follow steps to take.
Thank you so much.
Media Queries do not begin with # they are started by a # sign.
background-image: image-url("obr/head_mobile.png"); is not a property. Use background-image: url("img-path");. Then it will work fine.
EXAMPLE
#media only screen and (max-width: 500px) {
body {
background-color: blue;
}
}
Your Code Correction:
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.jumbotron {
background-image: url("obr/head_mobile.png");
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.jumbotron {
background-image: url("obr/head_mobile.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
.jumbotron {
background-image: url("obr/head_mobile.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
.jumbotron {
background-image: url("obr/head.jpg");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
.jumbotron {
background-image: url("obr/head.jpg");
}
}
Learn more about media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
.
See the working code here: https://codepen.io/manaskhandelwal1/pen/NWqdOPZ
I am trying to use #media to change te background image of my website
Somehow when I use #media (orientation: landscape) is works fine but when I use min and max width is doesn't show any background
I inserted
<meta name="viewport" content="width=device-width, initial-scale=1">
in the page that uses the css file.
#media screen and (min-width: 1501px) and (max-width: 6000px) {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
#media screen (max-width: 1500px) and {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
#media (orientation: landscape) {
body {
/* this one does work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
I don't want to use the landscape option but change backgrounds based on the width size.
Its just because you are not writing your css properly. Below example might be helpful for you.
#media screen and (min-width:1501px) and (max-width:6000px) {
h1{
background-color:red;
}
}
#media only screen and (max-width: 1500px) {
h1 {
background-color:green;
}
}
<h1>This is test</h1>
The syntax you are using is wrong. The correct syntax is #media only screen and (min-width: 1501px) and (max-width: 6000px) and #media only screen and (max-width: 1500px).
Try this:
#media only screen and (min-width: 1501px) and (max-width: 6000px) {
body {
background: url(https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 1500px) {
body {
background: url(https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
background-repeat: no-repeat;
}
}
Refer: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Hope it helps. Cheers!
If you are using that commenting syntax in your original CSS, this might be part of the cause for your troubles: // at the start of the line won't work for comments in CSS. Comments in CSS have to be writte as /* ... your code ... */.
And your second CSS rule shouldn't have #media screen (max-width: 1500px) and {... as a selector, but instead #media screen and (max-width: 1500px) {... (i.e. wrong order)
There is a lot of code in this one, so I'm going to put it in a codepen.
https://codepen.io/anon/pen/WMyQEJ
Basically I am using #media queries to extend the #about div to be taller as my content is literally going into another div on mobile devices. I need the blue background to extend below the placeholder image so it's all in the same section.
Media Query:
/*MOBILE SUPPORT*/
#media screen and (max-width: 768px) {
#about {
height: 120vh !important;
background: rgb(12, 18, 71);
background-size: cover;
}
}
Change the height to auto
/*MOBILE SUPPORT*/
#media screen and (max-width: 768px) {
#about {
height: auto !important;
background: rgb(12, 18, 71);
background-size: cover;
}
}
I'm trying to make a background the same height and widt as the picture which is selected in the background property.
And I would like the heigth and width to be responsive and not static.
I know it can be done with an image, but would like it to be a background if it is possible?
<div style="background:url('http://cdn.lolhappens.com/wp-content/uploads/2013/06/Aww-in-a-picture.jpg'); background-size:100%"></div>
A simple fiddle here
And I would like it to have same effect as if you use an image as this example
I solved it like this:
I found my anwser here
The fix in short, was to make a transparent picture and then have a div to that img container like this:
<div style="background:url('background.jpg'); background-size:100% 100%; width:100%; height:100%">
<img src="transparent.png" style="width:100%" />
</div>
/* default screen, non-retina */
.hero { background-image: url("../img/candc970.jpg"); }
#media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.hero { background-image: url("../img/candc290.jpg"); }
}
#media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.hero { background-image: url("../img/candc290#2x.jpg"); }
}
#media only screen and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, non-retina */
.hero { background-image: url("../img/candc538.jpg"); }
}
#media
only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, retina */
.hero { background-image: url("../img/candc538#2x.jpg"); }
}
#media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
/* Large screen, retina */
.hero { background-image: url("../img/candc970#2x.jpg"); }
}
you can mange with CSS
add background-size:100% 100% to your style
div {
background:url('http://cdn.lolhappens.com/wp-content/uploads/2013/06/Aww-in-a-picture.jpg') no-repeat;
width:100%; /* make sure you have set this */
height:100%; /* make sure you have set this */
background-size:100% 100%
}
demo here
#media screen and (max-width: 380px) {
.hero
{
background-image: url("../img/IMGBIG.jpg");
}
}
#media screen and (max-width: 320px) {
.hero
{
background-image: url("../img/IMGSMALL.jpg");
}
}
So i'm making a mobile web application that is supposed to take up a 100% of the screen without scrolling (in either direction).
I have fixed positions for the different area's of the screen.
html, body{
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.site-header{
position: fixed;
top: 0px;
height: 10%;
background: red;
width: 100%;
}
.site-article{
position: fixed;
top: 10%;
bottom: 10%;
background: white;
width: 95%;
}
.site-footer{
position: fixed;
bottom: 0px;
height: 10%;
background: blue;
width: 100%;
}
.site-nav{
position: fixed;
top: 10%;
bottom: 10%;
right: 0px;
background: green;
width: 5%;
}
I know there are media queries for css like the following
#media only screen and (orientation:portrait)
Where you can switch the orientation between portrait and landscape, but I can't think of anything to put between the two orientations as the width and height both need to stay 100% for each correct?
It displays correctly on my ipad, then you change the orientation and scrolling is needed (both horizontally and vertically). If I keep the orientation and refresh the page, it loads the page with the correct positions.
Is there anyway to do this using media queries with css or am I going to have to dive into some javascript? I need to be able to support multiple mobile devices, from android phones and tablets to ios phones and tablets.
Just FYI. Height 100% only extends to the bottom of the viewport. Anyways, instead of using orientation try using min-width and min-height media queries. And set up different break points for different resolutions.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}