I'm making a website and I've got it working on the Mac and the iPad. When I see it on the iPhone, one of the pages doesn't place the background-image correctly.
I'm using 2 background images on the of the website and I've already set it's height to around 1200px. When I see the same page on the iPhone, all the text wraps up and makes the page longe. My footer image stays in the same position and the text overlaps it. Shouldn't it work as the iPad since I've got all the text wrapped inside a ?
I'm noticing that the problem is that the image is set on the body and as it's not a , it will not follow the increased length of the text.
How can I specify a height of that background-image specifically for the Mac + iPad and another one for the iPhone?
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#333;
background:#000;
margin: 0px auto;
background-image:url(images/gradcinza_top.png), url(images/gradcinza_bot.png);
background-repeat:repeat-x, repeat-x;
background-position:0px 115px, 0px 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
On the iPad and the Mac, those 950px put the footer image on the exact place I want it. In the iPhone, since I have less area to present the text it simply makes it longer. I need something to say to the website to put the background-image on on position while it's being viewed on the Mac and iPad and another condition to specify a new position for the iPhone.
Thank you.
read some Responsive Web Design Guidelines..Use CSS Media Queries for this...
e.g.:-
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
Related
I've got a very strange bug in the Mailbox app when rendering an email, when you click on it it start to zoom out very slowly until the height of the email is shown...
There's a gif of it happening here:
http://mailrox.s3.amazonaws.com/bloggif_542959bc3de42.gif
A video here:
http://mailrox.s3.amazonaws.com/mailbox-zoom-bug.mov
And here's the HTML of the whole email, does anyone know what's triggering this slow zoom of the email?
http://jsfiddle.net/az1eryu4/
<body style="background: #FFFFFF; color: #000000 !important; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 17px; margin: 0px 0 0 0px; min-width: 100%; padding: 0px 0 0; width: 100%" bgcolor="#FFFFFF">
the reset of the HTML is on JSfiddle becuase there's too much to put here and it needs to be previewed.
The fix for this is to remove the 100% body width which occur in three places: header css, inline css and the width attribute.
You may also need to remove the 100% width from the html tag and the first table tag.
As 4th of October 2014 it looks like Mailbox has been updated, not to remove this, but the zoom animation has been sped up. So if you want to stop the zooming you'll need to remove the 100% widths.
http://ingoodtastemag.com/
On an iPhone, the button is round with a gradient. However, on every other desktop browser and Android that we've tested so far, it is square. I want the button to stay square. What CSS resets do I need for this?
This rounded corner is the default property of the Safari browser and iOS 5 devices. To overwrite it, use the following styling for your button:
-webkit-appearance: none;
border-radius: 0;
To keep your own border radius while removing the iOS styling
-webkit-appearance: none;
-webkit-border-radius: none;
border-radius: 10px;
You must remove webkit's border-radius to get your own style back, but you can still add your own border-radius after you remove theirs.
You could try to use this property on your button attribute.
border-radius: 0
I'm seeing strange behavior on an iphone 4s device when it comes to specifying sizes of a div in pixel units.
My iphone is 980 pixels wide in portrait orientation.
As a first test, I just created a plain html implementation. This works exactly as expected - the div takes up the entire width of my screen, but is no wider:
<body>
<div style="width:980px; height: 30px; background-color: red;"></div>
</body>
Now in GWT, I try the same thing (at least I think it's equivalent):
FlowPanel fp = new FlowPanel();
fp.setWidth("980px");
fp.setHeight("30px");
fp.getElement().getStyle().setBackgroundColor("red");
RootPanel.get().add(fp);
but when loaded on my iphone, the div appears to be twice the width of the screen. Is GWT doing some kind of scaling automatically? I know the iphone 4S is a retina display, therefore it has a 2x pixel ratio. Is it something related to that?
I can't examine the output html on my iphone, but when I look at the GWT version in firefox, I can see GWT is indeed outputting the 980px size I specified:
// What GWT outputs - looks the same as my hand-written version:
<div style="width: 980px; height: 30px; background-color: red;"></div>
So why would the GWT version render the div 2x as wide?
------ Update ----------
As Woojah recommended, I tried via a style definition:
.sanityTest {
width: 980px;
height: 30px;
background-color: green;
}
FlowPanel fp = new FlowPanel();
fp.setStyleName("sanityTest");
but still the same behavior - on the iphone 4s screen, the div is twice the width of the display. The dom looks exactly the same as in my handwritten version. The size behaves correctly on a non-retina device.
Thank you
I would recommmend you try the following:
do:
getElement().getStyle.setWidth(x, Style.Unit.PX);
getElement().getStyle.setHeight(y, Style.Unit.PX);
That is the equivalent for your
style="width:980px; height: 30px; background-color: red;
Another alternative is to defina inside your css stylesheed a class like
.yourCss
{
width:980px; height: 30px; background-color: red;
}
and then in your code do flowPanel.setStyleName("yourCss");
I have created some web content using a HTML editor and am loading it into a UIWebView. Everything seems to be working fine apart from one small bit. The CSS is being loaded, but the UIWebView ignores the line-height CSS attribute. Font sizes are being picked up correctly
My body CSS is as follows:
body {
color: #333;
text-align: centre;
padding: 0;
font: 0.75em/0.8em "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 0 0 0;
}
I have also tried adding a specific line-height: 80%; line, but it makes no difference. UIWebView renders the text in exactly the same way if I set the lien-height to 0.8em or 1.5em!
The HTML displays correctly when I load it in Safari on my Mac, so I presume the HTNML is ok, and other the text is not inheriting from other CSS statements. I'm lost as to what could be wrong.
Any ideas?
Thanks Craig
I have tried this on a real device and it renders correctly. This is a simulator issue :(
I was using Xcode 4.3.2 and the simulator running iOS5.1.
I will raise this as a bug with Apple, but hopefully this answer will help somebody else in the future!
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.