Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.
I have one slight problem, not a big deal but still a little annoying. I have:
<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal
Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!
Here is my css:
h1 {
color:#FFFFFF;
font-size:18px;
line-height:22px;
font-weight:bold;
margin-top:0px;
}
h2 {
font-size:12px;
color:#333333;
font-weight:bold;
margin-bottom:-5px;
}
p {
color:#333333;
font-size:12px;
line-height:18px;
font-weight:normal;
}
I believe you are looking for this in your CSS:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
A better solution can be using 100% instead of none, as stated by user612626 in an older thread:
Font size rendering inconsistencies on an iPhone
body {
-webkit-text-size-adjust: 100%;
}
this way desktop webkit browsers can adjust size and zoom proportionally too.
I think this is a better approach than filtering by screen size.
Hope it helps.
As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this article for more details).
In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.
E.g.,
#media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}
Related
I'm working on a responsive email using Mailchimp and all images are scaling down fine except for an image which has to have max-width set to 160px. This comes up fine on desktop but on mobile displays smaller than 100% width.
I've set up the following:
#media only screen and (max-width: 480px) {
img[class=mcnImage] {
width:100% !important;
But it still comes up too small. Any ideas?
As my comments above state, there's possibly a couple of things that could be legitimately getting in the way here. However, this is pure speculation, but consider for a moment...
CSS
img[class=one] {
border: 5px solid blue;
}
HTML
<img src="http://dummyimage.com/50x50" class="one"/>
<img src="http://dummyimage.com/50x50" class="one "/>
<img src="http://dummyimage.com/50x50" class=" one"/>
<img src="http://dummyimage.com/50x50" class=" one "/>
<img src="http://dummyimage.com/50x50" class="one two"/>
Before seeing what happens on the fiddle, first see if you can figure out what should happen (if you're familiar with the [] attribute selector).
Think you got it? Check out the fiddle.
img[class=term] not only is unnecessary (class selecting with img.term works perfectly), but it only selects one of the images. [attr=term] matches on an exactly statement, no whitespaces or anything. I don't know if that' srelated, but it's worth noting. nonetheless.
agree with above comment that you should follow this standard way to refer the elements.. but for the solution of your problem, you can try adding max-width:auto to your code;
#media only screen and (max-width: 480px) {
img[class=mcnImage] {
width:100% !important;
max-width:auto;
}
}
I am making a Responsive site using the foundation framework and TinyMCE breaks the format when the page is scaled down(it's not responsive). How do I make TinyMCE responsive?
The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table.mceLayout and the tinyMCE textareas. You will need to enforce these css rules using !important because they would otherwise be overwritten.
E.g., I use css similar to this:
/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
width: 100% !important;
}
/* on large screens, I use a different layout, so 600px are sufficient */
#media only screen and (min-width: 600px) {
table.mceLayout, textarea.richEditor {
width: 600px !important;
}
}
See this jsfiddle: http://jsfiddle.net/johannesjh/384uf/
Note: You may wish to use different media queries or css classes to make use to the "foundation framework"'s responsive grid.
There is a way to get the toolbars to wrap on smaller screens.
/* make the toolbar wrap */
.mceToolbar td {
display:table-row;
float: left;
}
.mceToolbar td:nth-of-type(11){
clear: left;
}
I made a fork of the fiddle that Johannes posted that includes the above rules:
http://jsfiddle.net/joshfeck/gMVSE/
Making the toolbar responsive for the latest version of TinyMCE:
.tox-toolbar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.tox-toolbar__group {
flex-wrap: nowrap !important;
}
This adds a horizontal scrollbar to the toolbar on mobile devices.
TinyMCE 5.1 was released with a new mobile responsive design.
To ensure it functions as intended, you need to add the following code to the head of your pages that are using TinyMCE.
<meta name="viewport" content="width=device-width, initial-scale=1">
More information here: https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it
I'm using version 4 of TinyMCE, there is a plugin named autoresize. It makes the editor responsive.
Here is something I use on a site to make the editor resize and the toolbars moves with the size of the page :
.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}
.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
}
table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}
Using small toolbar, they are properly layed out as the editor width changes.
"theme_advanced_resizing" should be set to "false". Also, more work is needed to make it work with fullscreen.
Remove Width and height from the TINYMCE_DEFAULT_CONFIG.
then apply your styling normally.
i am using this in the CSS:
div.tox.tox-tinymce {
width: 200px !important;
}
I use !important because tinymce using inline styling for that div, use #media if necessary.
a cropped screenshot from firefox inspector
I am working on this wordpress blog http://www.taranmarlowjewelry.com/?page_id=7 (looks fine on a normal web broswer) I tried to edit the CSS so it looks good on an iphone...I added these lines in my iphone css file
.wrapper{
position:relative;
width:840px;
margin:0 auto;
}
.blog #page{
width:840px !important;
}
.blog #main{
width:840px !important;
}
.blog #primary {
width:220px !important;
}
.blog #content {
width: 220px !important;
}
.blog #secondary {
width:200px !important;
float:right !important;
}
but there is a massive space between the blog and the sidebar and the width of this page is too wide, while my home, about page look good with the .wrapper at a width of 840px;
What is going wrong here?
Have you tried using initial scale?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Add that in and adjust your CSS accordingly.
The correct way is to use a responsive theme, so you'd be including a base.css stylesheet for all frame-formats and then adding style sheets for each new frame-format. Something like:
http://yourdomain.com/library/css/style.css' type='text/css' media='(min-width:481px)' />
Then you can use functions within that stylesheet to apply more styles to larger frame-formats. Bones Theme (by themble) is a great place to start learning about responsive web design.
Failing that - Sean is right, start with the meta viewport settings and adjust from there. There's a great answer on iPad and iPhone screen sizes here iPad browser WIDTH & HEIGHT standard
Andy
When I view www.americaspoeticsoul.com on my iPhone, the menu overflows for some reason. See:
And it even looks worst on the other pages because of the title:
Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:
/*Menu*/
#menu {
margin-bottom:15px;
width:450px;
}
#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
float:left;
}
#menu ul li a {
display:block;
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a:hover {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a.current_link {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Thanks,
Nathan
As an iPhone user and developer - I wouldn't use a site like yours on the phone unless I really had to - it would require all sorts of zooming in before I could read or click on that menu.
If you have content that you would like to present via a menu on an iPhone, I would recommend detecting small-screen mobile browsers and redirecting them to a mobile specific menu at the very least - jQuery Mobile is so easy to use to create a menu.
This is just a response about iPhone or similar size screens - I'm sure you'd want to fix this on an iPad if it looks the same.
You're not setting an explicit width on the menu items which leaves their width at the mercy of the browser and how large the font-size + margins and padding end up being. In the case of mobile browsers (Android too), your width is just too much for the 450px that you have. Try dropping the font size a point or something.
You're discovering one of the downsides of relying on text/fonts within your menu system. There is way too much variability (OS, browser, device, etc.) to expect the text to always behave properly or even use the font you intended.
I use a graphically created menu system which never changes no matter what and a simple text menu in the footer as a fallback.
You could try adding this to your CSS file:
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
This will stop Mobile Safari (and Windows Phone) from adjusting the size of your text in an attempt to make it more readable.
EDIT: If you only want to affect the text-size-adjust on mobile phones, you could use a media query:
#media screen and (max-device-width: 480px) {
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}
If you're feeling ambitious, you should consider adjusting the layout on a more fundamental level for smaller screen sizes. Any CSS you put inside that media query will get applied to devices that have a screen size of 480px or less.
For example, the buttons may be a bit too small for fingers to reliably tap on them. A better alternative would be to linearize the layout so that there's only one column and each link button takes up the full width of the screen.
Whenever there is a SPAN element in HTML content, the mobile version of Safari renders content differently- it seems that font size increases for the whole paragraph. Consider two examples.
<div style="border: 1px solid red; width:500px;">
<p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
</div>
and
<div style="border: 1px solid red; width:500px;">
<p>This is a <span>paragraph</span>. This is a paragraph. This is a paragraph.</p>
</div>
Second example breaks page structure because font size increases, and thus the content exceeds div's width. Is there any way around this (besides not using SPAN)?
iPhone OS 3.1.2
try adding -webkit-text-size-adjust: none; to the CSS and iPhone safari should stop making the span font size look differnet.
The display of those two HTML fragments look identical to me on iPhone Safari (also iPhone OS 3.1.2).
Is there any CSS being applied to SPAN tags?
[Edit: I see the difference now; you won't see any difference if both examples are on the same page.]
[Added:]
By explicitly setting the size, it appears you can get consistent text size between the two. For example:
<style type="text/css">
div, p, span {
font-size: 24px;
}
</style>
Paul, could you try explicitly setting the font-size for the span to match that of the paragraph tag and see if this solves your issue?