I have a responsive email layout where some elements stretch the entire width of the viewport, whatever that may be.
In Android (native mail and Gmail app on 4.4 at least) There appears to be a ~10px padding on either side. Is there any property or trick for negating this?
(I feel like this question should have been asked somewhere already, but searches provide only completely unrelated HTML email margin issues, so sorry if this is a duplicate).
Tried
Cancelling out the body margin. This affected the layout but did not fix the issue. The result of the following code simply removed the padding on the left but doubled the padding on the right in the native app.
html, body{
padding:0 !important;
margin:0 !important;
width:100% !important;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
font-size:100% !important;
width:100% !important;
}
No change in the Gmail app.
More insights
It seems the body remains the same width in the viewport regardless of width settings. If you set the width to 1000px, the email is shrunk to fit in the area with the margin on either side. The margin can be cancelled out using margin:0 on the body but the body stays the same size, resulting in the extra space appearing on the right.
I believe that the client is programmatically resizing the email to fit in a given width. The only way around this is likely to somehow "trick" the client. Nothing seems to have worked yet...
The problem is simply margins, the Android 4.4 email client is applying a margin value on all sides (but its not actually visible on the right side), so even before your email message is rendered, its messed with overall viewport already.
You can normalize it, via the below block.
body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; }
https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/
The problem is with left and right padding on the outermost div.
So instead, make a wrapper div that is wider than your content div, and center your content div in it. For example, my content div is 350px wide, and my wrapper div is 450px. This centers my content div perfectly, with my desired 50px on each side that I couldn't achieve with padding. This basically mimicked the 50px left and right padding that I was after.
For top and bottom padding, Gmail had no issues. So for the top and bottom of my div, I was able to just use padding.
Hope this helps someone stuck like I was.
Related
Most mobile browser will have a default behavior to allow the users to continue scrolling when they reach the top or bottom of a page, leaving a white space on the top or bottom of the page. And then the whole page will bounce back to fill the white space. In native iOS applications, we can easily set images and even interactive elements for these top and bottom areas. I wonder if this can be done for pure web applications.
What I tried is to set background image of html,body, for example:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately this didn't work because it seems the enter body was being over scrolled. I wonder if there is a special property we can set for the top and bottom empty over scroll areas for mobile websites.
I also have tried:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
This apparently didn't work either.
I believe that this depends solely on the browser as I do not know of any html elements that specify white spaces resulting from over scrolling.
Personally I never experienced any thing like this in windows, chrome, and android.
You might be able to create an animation that happens when the scrolling reaches the bottom or the footer of the page, but I do not think anything can be done to fill in the white space. It is mostly likely browser based.
So here is an interesting situation I have come across.
You are on Chrome for android, when you scroll the body the address bar runs away and hides. Great!
Now you want to add a footer to your page that sticks to the bottom. You do the following:
html {
margin:0;
padding:0;
height:100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#contentWrap {
margin:0;
padding:0;
padding-bottom:4em;
min-height:calc(100% - 4em);
position:relative;
}
#footer {
margin:0;
padding:0;
height:4em;
width:100%;
position:absolute;
bottom:0;
background:#262626;
}
<html>
<body>
<div id="contentWrap">
<div id="footer">
</div>
</div>
</body>
</html>
This works brilliantly, the footer will always stick to the bottom of the page regardless of content size or view-port scale.
However! Running this on a mobile design and testing in Chrome Android I found that setting the body to an explicit size, it will only scroll "content within" causing the address bar to stick around. Overflowing content is just set to default scroll in other words.
Noticing this I tried changing it to min-height so that it will always either be the size of the view-port if no content is available to fill it, or change height if there happens to be many lines of content.
Doing this however causes the contentWrap to base its height on the content rather than the parent element ie. <body>. So your footer now floats instead of sticking to the bottom.
I have played around with many combinations and cant seem to get what I want. Seems you have to live with either a sticky address bar OR a floating footer.
Please any ideas or thoughts on this would be appreciated.
Thanks but no that does not work in this situation.
Earlier today though whilst working on another project it hit me like a wet fish.
Remove dimensions from <html>.
Then add 100vh to your <body> instead of 100%
(making sure to only target mobile devices and not desktops)
Then it works perfectly! xD
Though Chrome is awesome imo. The little address hide on scroll has given me numerous headaches over the past few months.
When i make footers,
I code in css
.footerdiv{position:fixed; left:0; right:0; bottom:0; height:60px; z-index:777}
That does the trick.
Z-index keeps it above all the other elements. Position:fixed keeps it from moving as you scroll. and the left,right,bottom keep it sized perfectly.
Style as you wish.
Hope this helps.
thanks for any help in advance.
I'm 16, almost 17, and I've been working with HTML(5)/CSS(3)/PHP/SQL for a little over five years. But there is one problem I have never been able to fix. I've "tried everything under the sun", but there is a very annoying margin to the right of one of my floated elements that I've never been able to get rid of on any of my pages.
Here's the link: http://www.protodevelopment.de (It's in German, don't worry about the content.)
If you call up the page on a Windows/Android Device, there isn't the slightest problem. But as soon as you look for it on any version of Safari, mobile or desktop, there's the margin on the right.
Again, thanks for any suggestions in advance.
Image is here: http://tinypic.com/r/ekht2r/8
Are you talking about the small white line in the header and footer on the right side? It's the fact that you're calling width: 94% on those elements. Since the container has a width percentage of 75% just use width: 100% and it will extend those to the edge.
EDIT: That is the issue. If you are concerned with the padding use:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
That will keep the box padding from extending past the desired width/height. Then you can set the width to 100%. Set border-box on any element that will receive the padding (ex: header and footer)
It's hard to formulate a brief title. What happens is that the background-color of the centered div extends to the left and right edges of the screen and the background-color of the body is ignored or overridden.
I'm using the twentythirteen theme for this document.
It sets a width smaller than the full width and uses margin:0 auto to center the content divs.
In a standard native web view component in our app on Iphone and Android, the automatic margin (left and right) does not become the background-color of the body, but white. Between elements in the content div the correct background-color shows through their margins.
Also, Chrome on Android shows the same white margins.
Have both leading OS developers decided that their respective -kits should do this, or what is going on? Note that the CSS validator throws up hundreds of errors - well, programming a proper theme from scratch is not in the budget for this project.
If you can link to a web page where this works, I could make the web view load that and check.
A background-color is set on several classes.
.entry-header, .entry-content, .entry-summary, .entry-meta {
background-color: #ffffff;
margin: 0 auto;
max-width: 604px;
width: 100%;
}
Delete the background-color and the issue will be fixed.
On my page http://goo.gl/ kNAXq (remove the space in your browser, please don't replace the link here as I don't want google to link this page to my site.) when you click on the S in the MAP using your average pc/mac browser you get a popup with scrolling bars, which is intended. I do not see those borders on my android mobile phone's standard browser, though, what doesn't fit in is cut off there. What could be the cause?
Also Routenplanung and Zur Karte are not clickable even though they are valid links:
Routenplanung
and
<a style="a:link {text-decoration:underline;}" href="#mapdiv">Zur Karte</a>
Why do they not work as intended?
There's no scroll bars in mobile browsers, for the most part. You just need to drag the content in the div up, however, the div is too small to properly grab on to (at least based on what I see on the desktop, it's taking forever to load on my phone...).
Links don't work because you have another element on top of it... The <i> (why i?) is positioned absolute and over the top of the links.
First of all, <i> is for italicizing text and it's deprecated. A better setup, I believe, would be to put the shadow on the containing div. Just get rid of the i element. One downside is , you'll need to change how the background color is implemented on the grey table cells.
Just add shadow as a class to the div.
Then alter the css, like so:
.results-bl.shadow {
-webkit-box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
-moz-box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
}