Media query not found in my style section - asp.net-mvc

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%;
}
}

Related

Keeping Footer At The Bottom Of The Page Without Scrolling

Below is the code that I'm using to create a footer on my website. It looks the way I'd like it to, but have to scroll down to see it on a page that doesn't have much content on it. I'd like it to be at the bottom of the screen without having to scroll down no matter what size the screen may be.
Does anyone know how I can achieve this? How can I get the footer to stay at the bottom of any screen size without have to scroll down to see it?
<html>
<body>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI©</footer>
<style>
.footer{display: block;
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 10px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
}
</style>
</body>
</html>

Full Screen Video Playing In Background On A Mobile Device

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>

Flexbox on IOS scrolls differently

I noticed the scrolling functionality is different when using a flexbox based layout vs a position: fixed footer. The fixed footer is much smoother and shows a scrollbar. Flexbox isn't smooth at all, and does not show the scrollbar. I'd much prefer to use flexbox for my layout, but want the nicer scroll. Is there any way to achieve it with flexbox?
I'm testing on IOS 10 Iphone 7. Happens on both chrome and safari
Flexbox example
Fixed footer example
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
Fixed footer method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
padding-bottom: 72px;
}
.footer {
position: fixed;
bottom: 0;
height: 72px;
min-height: 72px;
width: 100%;
background-color: blue;
}
there's nothing to do with Flexbox.it's only the problem about overflow.so add this : -webkit-overflow-scrolling: touch; will work.

100% width seems to not work on iOS

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.

Textarea: Size of a window with no border

How do you make a textarea with no border and takes up all of the space it can?
Thanks everybody!
Here it is:
<style type="text/css">
textarea.test
{
width: 100%;
height: 100%;
border-color: Transparent;
}
</style>
<textarea class="test"></textarea>

Resources