Creating HTML emails, I have the following seemingly insoluble problem:
Gmail strips out any in the head. You have to use inline styles.
I want my design to be different on mobile (specifically Android) which I can do with a media query in the head
But inline styles over-ride anything in the head.
So how can I make a design, for instance, 600px wide in Gmail but 100% wide on Android?
You can try to embed an <style> tag for email clients that do not remove them and override the inline rules with !important. It would look something like this:
#media all {
width:100% !important;
}
Please let me know if it works...
Use this inline css: style='width:100%; max-width: 580px;'
Once the screen width drops below 580px, the layout becomes fluid.
You can change the values for whatever fits your needs. This way, you don't run into as many cross client issues. Gmail app doesn't support tags btw.
Related
In android application i am opening a web site.
In this website i am using rem as unit for width.
For html tag i have added font-size as 1px.
html{ font-size:1px !important; }
But if i see computed styles,i see font-size as 2.90909px
I have checked whether this css is getting overriden somewhere,but it is not.Attaching the screen-shot for the same.
Please let me know what is the issue and what can be workaround as i want html font size equal to 1px.
please see the highligted part,any known issue ?
You need to go deep, this should do it:
* { font-size: 1px !important; }
Using it on HTML tag will not affect some jQuery Mobile elements, like, for example, buttons.
I am mid-way through re-coding my current site and I have come across a mobile compatibility problem.
If you view the current website via mobile device (here) you can see the width and height of the website is normal sized as it would be when viewing on a desktop with the ability to scroll vertically and horizontally.
However, on my new site (using bootstrap slate from bootswatch - bootswatch.com/slate/) when you preview it on a mobile device it tries to squeeze it all into the fixed mobile device width (here)
I have tried adding the lines below, however I don't see a difference.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
html,
body {
height: 100%;
width: 100%;
}
Is there any way to make the new site to be shown in the same dimension as the current one in mobile devices?
Thanks.
What you see is the responsive behavior of bootstrap I guess. And imho it definitely makes sense to fit the content into the device width on mobile devices.
You can read about disabling the responsive feature in your bootstrap project here: Disabling bootstrap responsiveness
UPDATE:
To make your content horizontally scrollable add:
html, body {
overflow: auto;
}
to your stylesheet.
If this doesn't work try adding !importantto the declaration:
html, body {
overflow: auto !important;
}
NOTE:
This is not the most efficient way css-performance wise, but given your comprehension level of CSS, I guess it would be too much for your to alter the bootstrap.css yourself.
For Bootstrap it self the steps on disabling responsiveness are below. You can download template/CSS with this disabled. Check out http://getbootstrap.com/getting-started/
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
Good afternoon. I have a task to understand what is happening. Website was made before me.
If you try to resize the browser to 320x240 you will see that the site is adapted, and if you go through the mobile phone Android it is not. Someone can tell what's wrong? Where to start looking?
Website is using MasterPages. Almost all elements are HTML.
LINK
mif.antaris.ua
you need to look in css files for #media tags.
it seems like the mobile css has a max-width: 320px or something similar.
anyway, try putting all mobile css inside something like:
#media only screen and (max-width : 400px) {
/* mobile css */
}
this will apply the css code within the #media block only when screen width is lower than 400px.
hope that helps.
Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.
Works fine on iOS.
Any suggestions?
Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
p.intro {
max-height: 5000em;
}
You can set the max-height on any parent element. It doesn't have to be the first parent. For example,
<footer class="primary">
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
</footer>
footer.primary {
max-height: 5000em;
}
Note that the -webkit-text-size-adjust property you mention is non-standard. Read more about it here.
Currently Chrome for Android scales text using font boosting and there's no way to disable it.
If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom
I had the same issue with Firefox on Android.
The solution for me was to add the style "float: left;" to the div containing the problem text.
You might need to set the width of the div to the same as the parent (in pixels or 100%) to ensure it doesn't affect the rest of the divs.
See How to prevent mobile browser from resizing text
-webkit-text-size-adjust:none is so horrible!
I have poor eye site and constantly have my pages at 200% default zoom. With -webkit-text-size-adjust:none, I cannot read anything, and my only alternative is to use Firefox. It's my number one problem these days when browsing.
Too many sites use this, especially embedded Facebook comments on web pages. You should stop using it and create an interface that will work with any-sized font.
I have the HTML code below. I have set the body's width to 640px which is close to what the iPhone's resolution is. However, when I view the webpage on either an iPhone or an Android, it shows up just like it would in my web browser - only taking up part of the screen. The text is so small it's not usable.
What CSS code do I use so that the text stays normal in desktop browsers, but fills the screen on a mobile device? I read some things about using device-width properties but I can't get those to work either. What am I doing wrong?
Note
I'm not trying to get the red border to stretch all the way across the screen (eg: body:width100%). I just don't understand why the iPhone is not zooming into an area that is set to the same resolution it is supposed to have.
HTML Code:
<style>
body{ width:640px; border: 1px solid red; }
</style>
</head>
<body>
Hello World
</body>
</html>
Actual Output:
Desired Output:
Put this in your head tag:
<meta name="viewport" content="width=480">
To make the iPhone zoom in on the page, you can use the viewport meta tag.
You can set a scale of 1.0 to make Mobile Safari zoom in on your content exactly, no matter it's actual size.
Here's some documentation on different ways of setting the viewport: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Have you tried body { width:100%; border: 1px solid red; } ?
You'll have to use media queries for this.
http://www.alistapart.com/articles/responsive-web-design/
Example: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (Resize the page)
A seemingly straight-forward tutorial: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
If you're creating a webapp for iphone, you should really take a look at PhoneGap. If you're feeling a bit adventurous, it really is quite easy to use.