I'm trying to keep my button in the same position for for all screen resolutions, tablet, mobile, desktop, and larger screens. How do I do this?
#scrollmorebutton {
background: url('/assets/images/ui-s3b4cd44ffb.png') no-repeat 0 0;
height: 55px;
position: fixed;
top: 504px;
width: 55px;
left: 650px;
}
Related
The site I am talking about is currently live. It works quite well for me. There is just one mistake that drives me crazy:
On the standard Android Browser (tested on 4.1.2, LG), the logo is stretched and resized in a very bad way. You can see a demo below.
The CSS for positioning and sizing the logo is quite simple, using position: absolute on a position: fixed element:
Markup
<div class="fixed">
<div id="logo">
<a href="logo-link">
<img src="logo.jpg" height="55" width="34">
</a>
</div>
</div>
CSS:
* {box-sizing: border-box} /* bootstrap system */
.fixed {
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
height: 85px;
}
.logo {
width: 85px;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
}
img {
margin: 20px 27px;
max-width: 40px;
height: auto;
display: inline-block;
}
Working blind because I don't have that browser, but I suspect the issue will be the right:auto bottom:auto.
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 85px;
}
#logo {
width: 85px; height:85px;
position: absolute;
top: 0;
left: 0;
background-color:pink;
}
#logo a { display:block; width: 85px; height:85px; }
img { margin:15px 25px; }
Since the width is known, try replacing auto with the actual numbers.
Here is a Fiddle: https://jsfiddle.net/mnkx66zj/
You should also want to increase the clickable area on your link by making logo-link display block, and make it equal to parent size.
My FF DE44+ inspector says that the parent <a> is sized 0x24 and the <img> sized 240x164 (which are inline values). The parent has no z-index while the image has z-index: 1500.
It seems to me that the android browser has no width and height parent values it can reference while while the bottom: auto and right: auto forces it to do.
Further more, looking at the code of the 'live' site there is more to it than you are claiming in your question, because you give the values of the small image but the CSS of the big one (which also has left: auto, while the small one has no bottom, left, right at all).
You better take another good look at your code and revise the code in your question to reflect the code of the 'live' version, otherwise we will not be able to properly help you.
I have a responsive slider that we've built to handle product images. The images are of varying sizes - most respect our target aspect ratio, but there are images that don't both landscape and portrait.
The slider works everywhere apart from on Samsung devices in the default Android browser. The experience is common to tablets and phones, but only Samsungs. It works fine on other Android devices, the litany of desktop browsers and iOS.
The problem seems to boil down to a height: 100%; on the image which is used to limit portrait images to the height of the container. I've redacted our code down to the simplest version in the JSFiddle below.
JSFiddle: https://jsfiddle.net/g453xstc/8/
ul {
position: relative;
/* height 0 and padding top to maintain aspect ratio when resized */
height: 0;
padding: 75% 0 0;
}
li {
height: 100%;
width: 100%;
/* background to demonstrate how far the layout works on Samsungs */
background: #eee;
/* absolute positioning to account for height: 0 */
position: absolute;
top: 0;
left: 0;
}
img {
height: 100%; /* the offending line */
width: auto;
}
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;
}
When I apply background to an absolute positioned psudoelement in Chrome 40.0 on Android 4.4.2 (saw it on multiple devices and versions though) it displays extra pixel line on top and the bottom of the element. Is there any way to make it disappear?
Applied styles:
.el:before{
content: "";
position: absolute;
left: 0;
top: 0;
background: url('/image.png') center top repeat-x;
width: 100%;
height: 20px;
z-index: 60 !important;
}
Here is the screenshot:
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.