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.
Related
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.
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.
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.
When I embed the WebBrowser control in a window using either Active-X or the .NET WebBrowser control (thin wrapper around the Active-X) control, it doesn't seem to respect #media css attributes such as max-width. Given {fiddle}:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- necessary for tablets -->
<style>
#redBox {
background-color: red;
}
#blueBox {
background-color: blue;
}
#media (max-width: 1000px) {
#redBox {
display: none;
height: 0px;
}
}
</style>
</head>
<body>
<div id="redBox"> Red Box </div>
<div id="blueBox"> Blue Box </div>
</body>
</html>
The red box should disappear when you make the window smaller than 1000px.
This works in Chrome, Firefox and IE. However, when I load the page in a WebBrowser control using the .NET WebBrowser control, or a unmanaged application using the Shell.Explorer Active-X control, the change doesn't work. It doesn't matter if I load it using a file:/// attribute or with http.
Any idea how to make it work?
Try to add:
<meta http-equiv="X-UA-Compatible" content="IE=9">
in html.
Make sure you have IE9 or higher version.
WebBrowser control has all the functionality of Ie that is set up on local PC.
I have a similar Problem...
The only solution I can think of is a JavaScript-workaround, setting the desired CSS-attributes via JS depending on screen-width, for example screen.availWidth or such.
Table bug fixed: I was missing thead and tbody tags!
I have a weird problem with Bootstrap. Everything works perfectly fine, but when I try to use table-hover class it just does not work. Also, the table has upper border: http://gyazo.com/796c5bb99058c0d07e8ece8f54790399.png
Also, when I resize the Chrome browser, the navigation bar looks like this:
http://gyazo.com/cb7842b71d7a6e63eb0d5ce3f0b52902.png
instead of normal 'mobile' look on getbootstrap.com site.
I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
Code:
<table id='keytable' class='table table-hover'>
<tr><th>sv_licensenum</th><th>Type</th><th>Key</th><th>Description</th></tr>
<tr><td>0</td><td>Ranked</td><td>alrCOdo8PsFUur6iZmIlESd7</td><td>test2</td></tr>
<tr><td>1</td><td>Ranked</td><td>VLnNg25kSZRB4IzNpufu0qIs</td><td>test456</td></tr>
</table>
id="keytable" is not specified in any external non-Bootstrap CSS file/code. it is only used for Javascript.
After inspecting the file carefully I have figured the reason for this weird behavior.
You need to remove the style you have defined in you html. This is the reason the navbar gets a padding when you reach 979px or less. You can consider defining this through #media or media-query
body {
padding-top: 60px;
background-color: #f5f5f5;
}
And then you have to remove the style
nav-collapse collapse
This will hide whatever you put inside this.
Read http://getbootstrap.com/2.3.2/components.html#navbar
Hope this solves your problem.
I hope you have also included the required bootstrap js files. I did not get any issues when I tested the code you provided.