Hello everyone i am using media query in my asp.net MVC CSHTML page but it is not working ,It is not showing the element my code is fallowing
##media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#AboutDetails{
margin-top:8px;
margin-left:5px;
padding-left:5px;
padding-top:1px;
display:list-item;
}
#SocialLogin{
width:auto;
}
.AboutDetailsHed{
font-size:18px;
margin-left:5px;
}
}
Here AboutDetailsHed,SocialLogin,AboutDetails is working properly and above three is not working please help me
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important to your style property's value.
Related
I have been looking into this issue and found no solution at all. Not even background color in Gmail (website from desktop) and in Gmail app. I have tried the following things.
add viewport
add screen key like this #media screen and (max-width) {}. event with 'only' keyword
I have seen the links (i.e; https://www.caniemail.com/search/?s=media) which show Gmail support only a few properties. but those properties also not working.
So I need to know whether we can use media queries or not? So I can stop using it if it won't work.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>
<%=content_for(:title) %>
</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
#media screen and (max-width: 400px) {
#root, .upper-bar {
padding: 0 !important;
}
#child-cont {
border: none !important;
}
.upper-bar .slogan-text-cont {
text-align: center !important;
}
.pre-footer-section .steps-icon-cont {
width: 100% !important;
}
}
</style>
Found the problem that, Gmail, Outlook, and similar mail provider, has some limitations on how much CSS you can add. After that particular limit, your CSS won't work at all. So you have removed some CSS. So I did remove some CSS and automatically all my CSS and media queries start working. Unfortunately, I cannot find out any specific limit in any article for these mail providers.
I found myself that the Gmail CSS limit is more than outlook. Because when Gmail shows proper styling and sends the same mail to outlook, it didn't work for it. So, I further reduce the styling content, then CSS worked for both Gmail and Outlook.
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
I'm trying to hide an image when the screen/viewport has a width over 900px. For some reason, this is not working in a very basic example.
I have an extremely simple component for my footer -- it's functional, no state or methods, and it's only nested under the Main component.
I'm including the styles for the footer in the component so it's completely localized. For some reason, in this most basic example, #media doesn't seem to be working.
When I open Chrome devtools, I do see the media query being attached to my element at the appropriate breakpoint, but the style is not being applied even though my screen width is well over 900px. The styles declared in my media query are crossed out. So my element is choosing to maintain the original styles and blocking the media query for some reason. If I add a style in the media query that is not already present in the original class, it is applied.
I have included the following in head in index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
I'm also using React Router (if that makes any difference).
Is React preventing media queries from working? Am I making an extremely dumb mistake somewhere?
Here is my component -- the div with className 'logo' is what I'm trying to toggle:
import React from 'react';
import { Link } from 'react-router-dom';
import './footer.component.css';
function Footer(props) {
return (
<div className="footer">
<span className="column">
<div className="social-column-container">
<img className="logo" src="./images/logo.jpg" alt="kimbyarting logo" title="kimbyarting logo" />
<div className="social-icon-container">
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
</div>
</div>
</span>
</div>
);
}
export default Footer;
Here's the relevant CSS:
/* Small desktop */
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}
/* Mobile */
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
Any help is greatly appreciated!
Update
If the regular class definition and media definition have the same class hierarchy, the media styles are always overridden. However, if the regular definition has any fewer class hierarchies defined, this works.
I've confirmed, by removing all parent 'display' styles, that no other class immediately seems to be causing the style to override.
What is overriding the styles? Why is this happening when I follow best practices and have a good hierarchy defined for CSS classes?
It's not the problem with react its with the css code. If you apply two rules that collide to the same elements, it will choose the last one that was declared. So put the #media queries to the end of the css page. i.e
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}
I had some issues starting from a ReactJS perspective, but it turned out to be a Chrome issue.
For Chrome specific issues not applying your CSS media queries (and not the issue as answered above), add this in your <head> section.
<meta name="viewport" content="width=device-width,initial-scale=1">
I had the same issue but after putting media queries below all the CSS code it is working smoothly. It's because when you apply styles to same elements CSS will choose the code which was declared in the last.
I use the following media query to apply my CSS overrides in fullscreen mode:
#media (device-width: 100vw) and (device-height: 100vh) {
.content {
padding: 0px !important;
}
}
In works perfectly in Firefox but very unreliable in Chrome (both latest versions on Windows 7 x64). I can try to apply my overrides only when not in fullscreen mode but need to invert the query. So my questions are:
Should Chrome support the query?
How do I negate it (logical not)?
p.s.
My viewport is declared like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Use new css features display-mode
#media all and (display-mode: fullscreen) {
.content {
padding: 0px;
}
}
Also avoid using !important as it's a bad practice
You can negate #media rules with not. Details on this can be found here.
It might be less elegant, but more robust, to listen to the full screen event, then perhaps add an is-fullscreen class to the body so you can write your rule like this:
body.is-fullscreen .content { padding...
For example:
document.addEventListener('fullscreenchange', function() {
document.body.classList.toggle('is-fullscreen', document.fullscreenEnabled);
});
This event has vendor-prefixed versions, so make sure you're using the one(s) you need.
Here's the css code:
#media (max-width:600) {
body{
background-color:red;
}
}
p{
color:blue;
}
The problem is that the #media part doesn't work at all. I tested it on 3 devices (including PC) and tried to change my browser's window size. However, when I change (max-width:600) on screen, the whole thing works. What could be wrong? In addition, adding media='max-width:600' to <link> tag causes css to crash (the entire css doesn't work at all in this case) – what is this??
P.S.: the code above and adding media='....' works within codecademy.com codebit, but doesn't work on my site, where I test the whole thing. (http://peoples.pw)
You're missing the unit. I guess you're using pixels, so it'd be something like this:
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}
Demo: http://jsbin.com/fovesaci/1/
Edit: About the second question, you need to place it in parentheses. So this media='max-width: 600px' should be something like this media='(max-width: 600px)'.
It's a reasonable mistake since media attr has been mostly used for print, screen or all which have no parentheses at all.
use <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> in <head> tag
and css use px in width
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}