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
Related
[link removed] on iPhone, the top banner will not stretch all the way. Solution?
heres a screenshot: ![enter image description here][1]
Here's the CSS ive applied to the div:
#banner {
background-color: #F7F7F7;
background-size: cover;
box-shadow: 0 0 30px 2px #DCCFBF inset;
display: inline-block;
height: 200px;
width: 100%;
Issue 2. In chrome, when I resize the browser window, the bottom two nav icons shift (graphic design and social media). I put them in a container to try to keep them in place but it still happens... only on chrome. I realize the whole site shifts, but the other icons in the nav stop after a while and the bottoms one overlap them and it looks bad. Any suggestions?
The banner doesn't stretch all the way because your content is wider than what mobile Safari treats as the full width. It then scales down the whole page to fit the content and strands the header a bit.
see this answer to a similar question
It is usually fixed by adding
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to the <head>
As for the icons, Chrome seems to be respecting the #media query value of width: 100% on #home (line 528 of main.css) as you shrink the browser window while Firefox does not, and retains the first value width: 1020px (l. 91)
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 trying to create a special style sheet for mobile devices (for example - iphone).
I have in the main style sheet a rule like this one:
body
{
font-family: arial,georgia,"times new roman",times,serif;
font-size: 12px;
line-height: 18px;
}
and for a certain header: (all of my fonts sizes are in em except for the body which defines all)
#header #PageTitle h1{
font-size: 4.5em;
}
When I see the big header on my iphone it looks quiet small - what should I do to see it in a bigger size? How can I apply to all of the elements a rule to "just be twice as bigger" (I tried resizing the font-size of body but that didn't work).
What am I doing wrong and how should it be done correctly?
I found this piece of code which disables scaling in the iphone:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I am not sure if this is the exact solution (and it made everything look too big) - but this is half way there...
-webkit-text-size-adjust: none | auto | <percentage>;
So, twice as big would be: -webkit-text-size-adjust: 200%;
I would set the body set to 1em and then the headers, etc., set accordingly.
I recently have been working on a pilot mobile website for the company I work for. After performing a small alpha test, I came across several width issues for blackberries and iphones.
When you access my mobile site on a blackberry bold or an iphone, the width container is ending maybe 5-10% shy of the overall width of the view. On a blackberry curve, the container gets cut at maybe 50-60% of the overall width except for the speaker images on the homepage.
Here is the site:
http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html
I originally found this line of code to help resizing on an ipad, but have had no luck with blackberry/iphone specific issues.
<meta name="viewport" content="user-scalable=no, width=device-width" />
Just as a sidenote, I haven't experienced any width issues on any android devices.
Please help! And let me know if I can provide anymore information!
try this:
<meta name="viewport" content="width=device-width, maximum-scale=1">
EDIT:
After further review, it looks like the issue is with the style on .bottom - it has a width of 100%, but a padding of 10px, so it will be 20px larger than the screen.
I also noticed there's a white bar below your content on the page, I assume you don't want that. It's fixed in the .container style below.
Here's an easy fix for that. Just replace the following styles:
.bottom {
background:#2D3192;
width:100%;
}
.bottom p {
font-size:.70em;
color:#FFF;
font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
font-weight:400;
padding: 10px;
}
.container {
width:100%;
padding-top: 10px;
background:url(http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/P1656_mobileBG.jpg) repeat-x #FFF;
margin:0;
top:0;
}
I left the old blocks in so you'll be able to just swap them out with your current ones.
Oh, and you can also change your meta back to:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Hope that helps!
I have a mobile web application with an unordered list containing multiple items with a hyperlink inside each li:
My question is: how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accelerometer switches from portrait to landscape?
In portrait mode, I have the hyperlink font size set at 14px, but when I switch the device to landscape, it blows way up to 20px.
I would like the font-size to stay the same.
Here is the example code:
ul li a {
font-size:14px;
text-decoration: none;
color: #cc9999;
}
<ul>
<li id="home" class="active">
HOME
</li>
<li id="home" class="active">
TEST
</li>
</ul>
You can disable this behavior through the -webkit-text-size-adjust CSS property:
html {
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
The use of this property is described further in the Safari Web Content Guide.
Note: if you use
html {
-webkit-text-size-adjust: none;
}
then this will disable zoom behavior in default browsers. A better solution is:
html {
-webkit-text-size-adjust: 100%;
}
This corrects the iPhone/iPad behavior, without changing desktop behavior.
Using -webkit-text-size-adjust: none; directly on html breaks the ability to zoom text in all webkit browsers. You should combine this with som media queries specific for iOS. For example:
#media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none;
}
}
As it was mentioned before, CSS rule
-webkit-text-size-adjust: none
does no longer work in modern devices.
Fortunately, a new solution comes for iOS5 and iOS6 (todo: what about iOS7?):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
You can also add , user-scalable=0 to turn off pinch zooming, so your website would behave like a native app. If your design brakes when user zooms, use this meta tag instead:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
You could also opt for using a CSS reset, such as normalize.css, which includes the same rule that crazygringo recommends:
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
As you see, it also includes a vendor specific rule for the IE Phone.
For current information about the implementation in different browsers, refer to the MDN reference page.
You can add a meta in the HTML header:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
As of March 2019 text-size-adjust has a reasonable support amongst mobile browsers.
body {
text-size-adjust: none;
}
Using viewport meta tag has no effect on the text size adjustment and setting user-scalable: no does not even work in IOS Safari.
The below code works for me.
html{-webkit-text-size-adjust: 100%;}
Try with clearing your browser cache if it does not work.
In my case this trouble has been because I used CSS attribute width: 100% for HTML tag input type="text".
I changed value of width to 60% and add padding-right:38%.
input {
padding-right: 38%;
width: 60%;
}