I've made a footer for my client's tattoo portfolio site: http://jessetattoo.com/testing - it's contents (copyright and social media links) remain at the bottom where they are supposed to, but the background image sticks to the top of the page (the red bar).
This is my css:
#footer{
width: 100%;
height:40px;
background:url(../images/footer-bg.jpg) repeat-x;
bottom:0;
position:relative;
margin-left:-10px;
margin-right:-15px;
}
I've also tried:
#footer{
min-width: 100%;
max-width: 100%;
height:40px;
background:url(../images/footer-bg.jpg) repeat-x;
bottom:0;
position:fixed;
margin-left:-10px;
margin-right:-15px;
}
Setting the position to fixed worked but I want the footer to scroll, not be sticky. Having a sticky footer would be fine, but when viewed on a mobile device the footer does not stay fixed, instead it just gets cut off when the user pinch-zooms in to read content (it's not a responsive site unfortunately).
Any help is appreciated! Thanks in advance!
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'm trying to animate a DIV using CSS3 transitions. The example DIV is:
HTML:
<div class="element"></div>
CSS:
.element {
-webkit-transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 2s linear, width 2s linear;
position: absolute;
left: 100px; top: 100px;
height: 10px; width: 50px;
background-color: black;
}
This means that the DIV occupies a region in its container from (100px, 100px) to (150px, 110px) - and the right edge is fixed at 150px.
I would like the DIV to maintain a static right edge at 150px whilst I translate the left edge off the screen, so I've been applying (via Javascript) a transition class to the DIV like so:
CSS:
.transition {
-webkit-transform: translate3d(-200px, 0, 0);
width: 150px;
}
The issue that I'm seeing is that the transition on the width does not keep up with the left edge of the translated DIV, so instead of increasing uniformly in size and left position, the right edge position fluctuates as the DIV slides off at a different rate, flickering slightly (depends on platform how much it flickers).
The issue occurs more vividly on Mobile Safari (a Phonegap webview on the iPhone is my main development platform), rather than on Chrome.
I've put a JSFiddle at http://jsfiddle.net/XwuBz/ which demos it (view it on an iPhone to see it occurring).
Is there another way to achieve this end result?
Thanks in advance,
Dan
Well, it seems that iOS Safari has some weird issues with transitions / transform.
I tried to achieve the same results with jQuery only, and it worked on iPhone 4s, iOS6:
$('.element').animate({left:'-=200','width':'+=200'},2000);
Here is a demo.
I tried many things, but until now, nothing happend. My footer won't fill the page (horizontal), but get stuck somewhere in the middle of the page. (Only on an Ipad and Iphone.)
a meta tag don't work and instead of min-width:100%, min-width:1024px; neither works for me.
A fixed positioned footer is no option... (the footer has to flow with the content when more text is edit.)
This is my CSS code of the footer:
#footer_content{
min-height:200px;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
}
Set same backGround color for table view and the main view
try setting the viewport to 1.0
further a clear:both might help
Also here are some good explanations on how to use viewport ...
iPad specifics: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
generic" https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Make This:
#footer_content{
min-height:200px;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
}
This:
#footer_content{
min-height:200px;
width:100%;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
display: block;
}
And then add a clear: both right after you close the footer div.
I have a page containing an empty div with a gradient in it, like this:
<div class="prodGradientArea"></div>
.prodGradientArea {
background: -moz-linear-gradient(center bottom , #ECEAE9 0%, #E4E3E2 50%) repeat scroll 0 0 transparent;
display: inline-block;
float: left;
height: 10px;
width: 420px;
}
This looks brilliant in FF, IE, Chrome and Safari ... on a computer. When checked in Safari on an iPad or iPhone, I get a tiny border around the div. This is removed if I write text in the box or if I zoom in a lot but not if I write a non-breaking white space. I have even tried putting in a transparent pixel with but it made no difference to the imaginary border. Also tried setting border=0 but this was of course not the problem (it is not a real border, just a visual "feature").
So the only thing that removes it is to add pure text. I guess I can add a dot and hide it with color or so but it would break my little heart to make such an ugly fix.
Please help!
Jenny
Insert in your index.php this code in the <head>-area to avoid artifacts from bad zoom interpretation of iOS:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Then go to your css-file and insert a 1px negative margin, to avoid this. In my website this was the footer div:
.unten {
margin-top: -1px;
}
I hope this will help you, too!
hey guys,
I have a div.mapFullscreenContainer
#mapFullscreenContainer {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
This div is shown when I scroll to the bottom and click on a button. In normal browsers this works just fine. The overlay is 100% wide and 100% high and lies on top of the page.
However on touch devices there is the problem that the overlay is always out of the viewport. Imagine the button that makes the overlay visible is in the footer of a rather long webpage. The overlay is always at the very beginning of the page so it's not immediately visible to the user. The user has to scroll back to the top to see the overlay.
Any idea how I could fix that so it behaves like on a normal browser. bottom:0; instead of top:0 doesn't make a difference.
you can use JS to count and apply total height of your page to this div http://jsfiddle.net/seler/FjeyK/