i'm trying to make media query in pixate freestyle.
i'm handling the position in landscape and portrait but it's still the same position..
this is my code
.btn-green {
color : .blackColor;
border-width : 5px;
border-color : #84a254;
border-style : solid;
border-radius : 10px;
font-size : .fontSize;
top : 200px;
width : 100px;
height : 100px;
}
#media (orientation:landscape){
.btn-green {
left: 200px;
background-color: #666666;
}
}
#media (orientation:portrait){
.btn-green {
left: 10px;
background-color: #000000;
}
}
you have to specify the landscape & portrait width like below.
#media only screen and (device-width : 1024px) {.... write your css...}
Related
Below is the code that I'm using to build a page on my website. I'd like the video that I have set to display in the background across the entire screen. I've been able to achieve this on a PC, portrait on a mobile device (I'm currently using an iPhone 12 pro), and on landscape on a mobile device.
However, I'm noticing two issues at the moment. The first issue is that on a mobile device I'm able to scale the video to any size that I'd like. The second issue is that when placing my mobile device in landscape and refreshing the pages a few times the video scales down and doesn't display across the entire screen.
How can I set the video so that no matter what device someone is using it can't be rescaled? And how can I have the video be played full across any screen of any device? The answer to the solution seems to lie within the meta tag, no matter what I do with the CSS it doesn't change the size of the video to fit a mobile device.
<!DOCTYPE html>
<html>
<meta name="viewport" content="viewport-fit=cover, user-scalable=no" charset="utf-8">
<body>
<title>MORIKOBOSHI - 公式ウェブサイト・Official Website</title>
<div class="video-container">
<video src="Home_Page.mp4" autoplay loop muted playsinline style="z-index: 100px; overflow: hidden; object-fit: cover;"></video></div>
<div class="relative">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;">
</div>
<div class="absolute">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;">
</div>
<div class="home_page">
<p style="text-align: center; font-size: 40px; font-family: sans-serif; overflow: hidden;"><b>日本語</b> | <b>English</b></p></div>
<style>
.relative {
font-size: 25px;
}
.absolute {
font-size: 13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
font-size: 11px;
}
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
font-size: 6px;
}
}
video {
object-fit: fill;
}
.video-container {
position: fixed;
text-align: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: 100%;
height: 100%;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.video {
width: 100vh;
}
}
.relative {
position: absolute;
top: -10px;
left: -13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
position: absolute;
top: -15px;
left: -30px;
}
}
.absolute {
position: absolute;
left: 28px;
top: 28px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
position: absolute;
top: 4px;
left: -15px;
}
}
video {
position: fixed;
text-align: center;
object-fit: cover;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
object-fit: cover !important;
-webkit-object-fit: cover !important;
-moz-object-fit: cover !important;
-o-object-fit: cover !important;
}
p {
color: white;
text-decoration: none;
color: white;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
-1px -1px 0 #000;
font-size: 400%;
margin: 50px;
position: relative;
z-index: 3;
}
.home_page {
position: fixed;
top: 520px;
left: 410px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.home_page {display: none;
}
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.home_page {display: none;
}
}
</style>
</body>
</html>
Do I have to add some link or file to get media queries to work. When I try to use a media query inline in a .cshtml file I get a red line under '#media' that says "cannot resolve symbol media". This is in a asp.net mvc project. When I move the media query to it's own .css file it works fine. Are media queries not allowed inline in a asp mvc project?
Here is what solved it.
##media only screen and (max-width:768px) {
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
I added two # symbols.
I got it to work by putting the media query into a .css file. When it was inline in the .cshtml file it didn't work. Code below
<style>
html,body,.container-fluid,.row {
height: 100%;
}
.row > div {
height: 100%;
}
.row .col-md-5 {
background-color: #eee;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
.row .col-md-7 {
background-color: #ddd;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
#googleResultMap {
width: 100%;
height: 100%;
/*border: 1px solid black;*/
}
.searchFilter {
/*width:200px;*/
height: 20%;
border: 1px solid blue;
}
.searchResults {
height: 80%;
border: 1px solid green;
overflow-y: scroll
}
input[readonly].default-cursor {
cursor: default;
}
#media only screen and (max-width : 768px) { // does not work
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
}
</style>
<link href="~/Content/MediaQueries.css" rel="stylesheet" /> //works
What you have done is that you not specified the media rule
your code should be something like
#media screen and (max-width: 300px) { ... }
Edited:
At the top of your webpage add this line of the code in the <head> tag
<meta name="viewport" content="width=device-width, scale=1.0" />
Then in the style defination:
#media screen and (max-width: 768px) {
.searchFilter {
height:100%;
}
}
I'm using CSS sprite sheets for a page I'm creating for mobile devices. I've got the layout how I want it, and here's the CSS I'm using for that (this looks fine on Chrome Canary's iPhone 3GS emulator):
div#logo {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px 0px no-repeat;
display: inline-block;
width: 90px;
height: 44px;
display:block;
float:right;
margin:10px;
}
div#stars {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -46px no-repeat;
display: inline-block;
width: 71px;
height: 12px;
}
div#iPhone {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') 0px 0px no-repeat;
display: inline-block;
float:left;
width: 112px;
height: 238px;
margin-top: 54px;
}
div#separator {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -60px no-repeat;
display: inline-block;
width: 1px;
height: 53px;
}
Of course, when viewing this on a Retina display the images come out slightly pixellated. I followed the advice in this tutorial for switching sprite sheets for different display densities, and added this:
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dppx) {
div#logo {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px 0px;
}
div#stars {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -91px;
}
div#iPhone {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: 0px 0px;
}
div#separator {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -117px;
}
}
So now my page still displays fine on the iPhone 3GS simulator (since the #media switch does nothing to it) but when looking at it from an iPhone 4 simulator the images come through as double the size. The layout stays the same (the frames displaying the images are the same size) but the images are cropped so you can only see the top-left quarter of each image.
Is there some other attribute I need to specify to make the images squeeze into the double-density pixels while maintaining the same size on the screen?
I found a solution: instead of defining the new offsets for each element like so:
background-position: -226px 0px;
We just need to 'pretend' that the image is the same size it used to be. So we set the background-size attribute to the size of the smaller sprite sheet:
background-size: 204px 238px;
...and that seems to work!
I've done a fair amount of research on this, but have been unsuccessful in figuring this out. I'm working with a responsive site using the lessframework.css for the responsive grid. It is not properly snapping to any tablet size between 768px and 1024px. When I inspect the elements at that screen size, it appears that the .container is not resizing between those dimensions. However, I don't see anywhere in my css where this is designated to a specific px size, therefore overriding it. I picked this project up from a previous developer, and I am new to responsive code. Any help that can be given would be a huge help. Thank you!
Website is www.mereo.co
Here's a sample of the code from the lessframework.css grid:
/* Default 8-column layout
60 px columns, 24 px gutters, 60 px margins, 768 px total
---------------------------------------------------------
1 2 3 4 5 6 7 8
60px 144px 228px 312px 396px 480px 564px 648px */
/* 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 */
}
#if-logged-in {
position: relative;
width: 100%;
height: 24px;
line-height: 24px;
background: #000;
color: #aaa;
font-size: 10px;
z-index: 1000;
}
#if-logged-in .container {
padding-top: 0;
padding-bottom: 0;
}
#if-logged-in p {
margin: 0;
}
#if-logged-in a:link,
#if-logged-in a:visited {
color: #fff;
text-decoration: none;
}
#if-logged-in a:hover {
text-decoration: underline;
}
#if-logged-in a:active {
text-decoration: underline;
margin-bottom: -1px;
}
.container {
/*padding: 0 60px;*/
width: 768px;
margin: 0 auto;
overflow: hidden;
}
#header-image {
padding: 0;
overflow: hidden;
}
/* HEADER IMAGE
full size - 1068x300
8 column layout resized to 890x250 displayed at 648x250
5 column layout resized to 534x150 displayed at 396x150
3 column layout resized to 365x100 displayed at 228x100
*/
#header-image img {
width: 890px;
height: 250px;
margin-left: -121px;
padding: 0;
}
#content {
width: 356px; /* 5 columns */
margin: 0;
padding: 20px;
overflow: hidden;
}
#sidebar {
width: 184px; /* 3 columns */
margin: 0;
padding: 20px;
overflow: hidden;
}
::selection {
background: #c6d8cd;
}
::-moz-selection {
background: #c6d8cd;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}
the .container { } styles specific to that ipad size and resolution should be inside the media query you have there. So if the container should be 400px wide on an iPad, then your code should be:
/* iPad 1 & 2 (landscape) */
#media (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
.container {
width: 400px;
/* all other .container styles specific to the iPad 2 in landscape should go here */
}
#if-logged-in {
/* other styles go in their respective selector in the media query */
}
}
Don't forget that there is an iPad without the retina display, and one with which means if you have any background images or svg images loading from css those should be set to point to the assets that are 2x resolution to look good on retina iPads inside the retina iPad media query.
I've seen a few posts about this but it does not seem to help with the issue I have used <meta name="viewport" content="width=device-width,initial-scale=1" /> in the head but it does not solve the problem of the header and footer not spanning the width of the viewport. The main content area seems work though.
the site to reference is brendanfenn.com
The css is as follows. Any insight is greatly appreciated.
#wrapper {
margin: 0 auto;
position: relative;
}
#header_container{
background-image: url(http://www.brendanfenn.com/wp-content/uploads/2013/02/headerBG1.jpg);
width: 100%;
}
#header {
width:964px;
height:150px;
margin: 0 auto;
}
#content {
width:964px;
background: url(images/border-bg.gif) repeat-y top left;
z-index: 1;
margin: 0 auto;
}
#content #left-col {
width:615px;
float:left;
padding: 20px 11px 20px 10px;
z-index: 1;
}
#content #right-col {
width:307px;
padding:3px;
float:left;
z-index: 1;
}
#footer {
width:100%;
background: #2a2006;
margin: 30px 0 auto;
}
Try setting the width and height values for your body element
body { width: 100%; min-height: 100% }
Another option that may help address the issue is using the #media type, which you can use to specify css values for when a device is in landscape mode.
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
body { //values here }
}
<meta name="viewport" content="width=device-width,initial-scale=0.4">
(From the linked file)
is your problem. This is setting your viewport to 800px wide (device-width * 1/0.4).
'width:100%' refers to 100% width of the viewport, i.e. 800px, so everything is working as it should.