I'm having some troubles displaying my first websites on mobiles devices. When the device is vertical, the website background image does not fit the entire screen i've tried with the background-size: 100% 100% rule but does not work either. This is my css right now:
background-attachment: scroll;
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
The last trouble is the footer. It does not stick to the bottom of the screen even on some PC. This is the css:
<footer id="colophon" class="site-footer" role="contentinfo">
#colophon {
background: #000 none repeat scroll 0 0;
color: #ffffff;
opacity: 0.8;
padding: 20px;
}
I tried with bottom:0px but does not work and this is all.
Thanks in advance.
To make your background image fill the entire screen you can use background-size: cover. You will also need to make the body 100% height.
body.custom-background {
background-image: url('http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg');
background-size: cover;
height: 100vh;
}
It, however, will not look right with the current background image. You might want to make this 2 images instead.
For the footer, assuming it is only for this site and you will not change the height, or you can change the CSS accordingly, you could make the page id 100% of the screen height and add a bottom padding that is at least as high as the footer.
#page {
position: relative;
z-index: 999;
margin: auto;
min-height: 100vh;
padding-bottom: 250px;
}
Then you can give the colofon an absolute positioning.
#colophon {
background: #000;
opacity: 0.8;
color: #ffffff;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Related
I'm trying to position a form field such that it is always 40% down the page and takes up exactly 64% of the screen width, regardless of the screen it is on, the height of the form element is always supposed to be exactly 5% of the screen's height.
This seems like it should be trivial but I have been unable to figure it out based on any of the vertical positioning tutorials here. I can get the positioning correct using code similar to below:
#welcome_email {
/*positioning */
position: absolute;
top: 40%;
left: 18%;
width: 64%;
box-sizing: border-box;
height: 5%;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
}
#welcome_password {
/*positioning */
position: absolute;
top: 45%;
left: 18%;
width: 64%;
height: 5%;
box-sizing: border-box;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
border-top: none;
}
<input id="welcome_email" placeholder="E-Mail"></input>
<br>
<input id="welcome_password" placeholder="netid(?)"></input>
But then when the soft-keyboard opens on android everything shrinks because the viewport sizes have changed. Is there any way I can achieve both of these goals? Ideally when the keyboard is open it would just focus on the form field like any other form on the internet without rescaling (with scrolling enabled) but when the keyboard is down the element would be positioned in the way depicted above. (You can see similar behavior by opening chrome's CDT for example)
Another way to think of this question is, can I scale and position elements relative to the screen size only once and not everytime the viewport size changes?
Try to an extra css propierty to your "welcome" fields:
min-height:5%;
If i doesnt work try to use a value in pixels. min-height:30px;
EDIT:
I added a div that cotains the 2 inputs, try it: http://jsfiddle.net/7aoo6ktf/
<div class="container">
<input id="welcome_email" placeholder="E-Mail"></input>
<br>
<input id="welcome_password" placeholder="netid(?)"></input>
</div>
.container{
position: absolute;
top: 40%;
left: 18%;
width: 64%;
}
#welcome_email {
/*positioning */
box-sizing: border-box;
width:100%;
height: 5%;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
}
#welcome_password {
/*positioning */
height: 5%;
width:100%;
box-sizing: border-box;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
border-top: none;
}
My advice would just be to set a size e.g. 50px;. What I think might be happening is that once the keyboard appears your application reloads and applies the 5% based on the screen size minus keyboard size.
i just finished developing my iOS Application with Cordova. So now i want to do the same on Android. Everything works fine but: You cant Overscroll the content. I have a fixed header/footer, then a Picture and then some navigation points.
On iOS you can Scroll the Content so that you can see the clients logo in the background. On Android this doesn't work, you can not overscroll the content to see the logo.
I read that -webkit-overflow-scrolling: touch and overflow: scroll doesn't work on Android. But those questions were from 2011. Is it still not possible to make the content overscrollable on Android?
Thank you!!
.ScrollableWrapper {
overflow: scroll;
-webkit-overflow-scrolling: touch; /*to make it smooth as native*/
background:url(../img/start/bg_wrapper.jpg)no-repeat scroll 0 0 / 320px 480px rgba(0, 0, 0, 0);
top: 45px;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
position: fixed;
}
#header {
padding-top: 0px;
margin: 0px;
position: fixed;
top: 0px;
left: 0px;
width: 320px;
z-index: 2;
max-height: 45px !important;
height: 45px !important;
}
#foooter {
position: fixed;
bottom: 0px;
z-index: 2000;
width: 100%;
height: 58px;
}
Maybe you can have a look at iScroll.
The task is to display block at center horizontally and vertically inside other block. I use this code
<div class="parent">
<div class="child"></div>
</div>
.parent {
background-color: #AFAFAF;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.child {
background-color: #FF0000;
bottom: 0;
height: 200px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 200px;
}
and it works great on browsers and iOS devices, but this is the case in mobile android devices (not tablet): the inner div gets pinned to the top left corner, but when I inspect element using Adobe Edge Inspect I see that highlighted area for this inner div is displayed correctly. How can I fix this issue with centering on Android mobile? The size of inner block will change so the desigion should be universal.
I used to align div horizontally and verticaly the way you're doing but it seems like this technique is not really cross browser. Instead I took a look at the way Facebook was doing.
The demo on JsFiddle
The HTML :
<table>
<tr>
<td><div class="square">Some text</div></td>
</tr>
</table>
The CSS :
html, body {
height: 100%;
width: 100%;
}
table {
margin: 0px auto;
height: 100%;
}
.square {
width: 150px;
height: 150px;
background-color: red;
}
NOTE : I recently took a look and it seems like Facebook changed the way they do it. They are still using table display properties but no more the table, tr and td tag (div instead).
The easiest way with your markup is {left:50%;margin-left:-100px;}.
Then the same with height. {top:50%;margin-top:-100px;}
In summary:
.child {
background-color: #FF0000;
height: 200px;
left: 50%;
position: fixed;
top: 50%;
width: 200px;
margin: -100px 0 0 -100px;
}
I have set a fixed background image on my website and it looks fine on desktops and all browsers on desktop but on android phones it tiles and repeats it. I cannot find a work around this. Here is the code.. If someone has a fix for keeping a background image fixed without repeating on android Chrome please let me know.. thanks. Please exclude any comments that will not help.
the CSS:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-attachment: fixed;
}
also tried this but didn't work.........
html {
background: url("images/320htmlbackground.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
I just had a similar problem but I'm not sure if it's the same one or not. My problem was that the background image wasn't staying in the same place as you would expect from a fixed image. I.e. when I scrolled up and down the background image moved with the page.
It turned out that I had set the background on the body tag. It worked fine on all browsers except on my phone. I changed the background to be on the html tag and it stays where it should without moving as I scroll.
For me this works well:
body{
position: relative;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
#media screen and (max-width: 767px) {
height: 100%;
overflow-y: auto;
}
}
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.