Working on a website using asp and vb.net, javascript, and heavy css.
I used a fixed footer across the bottom of the screen.
Works fine on laptops and pc's, even surfaces and ipads.
However, when viewed on an iPhone, Android phone, or kindle, the fixed footer starts at the bottom correctly, but if the phone is turned horizontally, the footer, while it initially appears correctly at the bottom, doesn't stay at the bottom as the user scrolls down through content. is this a phone issue? if so, is there some way to redefine the CSS for those user agents to compensate so that the footer does actually stay locked to the bottom of the screen, and not just at the height it starts at?
.FooterBanner {
width: 1966px;
position:absolute;
bottom:120px;
height:47px;
left: 0px;
}
.FooterHome
{
background-image: url('/Images/HeaderBg.jpg');
background-repeat: repeat-x;
padding: 5px 0px 22px 10px;
width:99%;
min-width:500px;
position:fixed;
bottom:0px;
height:50px;
z-index:900;
margin:auto;
vertical-align:top;
}
Related
I'm working on a page with a long scrollable background image of the road. The page is intended for mobile devices primarily. I need to align several items (containers with text and images) according to the background so that those items would be located near certain points on the road.
The problem is that my background image width and height is changing depending on the mobile device screen, while the items preserve their position, and thus not aligned with the road anymore.
How can I fix this issue using SASS/CSS?
You can use vw css unit to place the content element relative to screen width.
<div class="container">
<div class="content">Content</div>
</div>
.container {
background: url("//placehold.it/1500x1000") no-repeat;
background-size: 100% auto;
height: 1000px;
position: relative;
}
.content {
background: #f00;
padding: 10px;
position: absolute;
left: 48vw;
top: 35vw;
}
Checkout this codepen -> https://codepen.io/moorthy-g/pen/bZYyza
I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
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.
I have a simple webpage consisted of centered image:
<img class="centered" src="comingsoon.jpg" width="1280" height="1024" usemap="#Map" border="0" />
and CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -512px;
margin-left: -640px;
}
Everything looks fine, except for one problem I encounter on mobile browser:
When I load the site on android phone in vertical screen positioning site looks as intended, but when I flip the screen horizontally the centered image gets shifted down.
I understand it has something to do with the screen size change but not sure how to make it work as intended...
I have a centrally positioned container for my page content called #main. It is positioned absolutely as I wanted some space above the container. The centering therefore works with negative margins and a left:50% instead of using margin:auto.
The problem is that on my Android tablet in both chrome and stock browser, the website renders displaced to the left. This shouldn't be possible as the CSS should put it slap bang in the middle.
#main
{
position: absolute;
color: black;
left: 50%;
margin-left: -475px;
margin-top: 40px;
width: 950px;
height: 1600px;
background: #6B6B6B;
border: solid 1px black;
box-shadow: 10px 10px 10px #444444;
}
Interestingly I just removed the negative left margin code from above. On everything but my Android tab, it renders as expected with the container halfway across the browser window. On my Android it is snuggly positioned against the right hand side of the window. I am guessing that if you perform a -475px from THIS position, that results in the left offset. However, why is the main container not just overflowing the right edge before the margin moves it back? Why is 50% left not resulting in 50% left?
As always all discussion and advice gratefully accepted.
EDIT:
Further info, just tried removing absolute position, left 50% and using margin:auto. The main container is STILL on the left.
Fiddle.
To get something to center you tend not to use margin:auto; but margin:0 auto;.
Also the main reason you seem to not want to use relative positioning is so that you can have the #main div floating slightly from the top. Relative positioning allows this just fine.