I am using bootstrap to display some thumbnails in a div. The thumbnails are actually canvas because I need to create lighter thumbnails client-side.
It actually isn't perfect design (I am more a developer than a designer) but it works pretty well.
However I wonder about the following: when I look at the app with a mobile, in portrait mode, then I get the col-xs-6 class, and the screen looks fine. But when I rotate the screen, it appears I still get the col-xs-6 and its associated pixel size - which looks pretty ugly - screenshots:
rotated screen:
http://imgur.com/cNTGWy0
normal screen:
http://imgur.com/ZHlwq42
Is this a bug on the phone, or on the phone's browser (using Galaxy S3)- or is my code wrong? Shouldn't rotating the browser give a different resolution? Should I just ignore this issue, as maybe there's no elegant solution?
This is the HTML:
<div id="upload-list">
<!-- for each image -->
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="thumbnail">
<div class="caption">IMG_0004.JPG<i><br>6.14 MB</i></div>
<div style="display: none;" class="abort_upload working">
<span class="alert-warning glyphicon glyphicon-remove-circle"></span>
</div>
<!-- This is for upload progress display -->
<div class="knob-outer">
<div class="knob-progress">
<div style="display:inline;width:64px;height:64px;">
<canvas height="64" width="64"></canvas>
<input style="width: 36px; height: 21px; position: absolute; vertical-align: middle; margin-top: 21px; margin-left: -50px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 12px Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px;" readonly="readonly" value="0" data-width="64" data-height="64" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" type="text">
</div>
</div>
</div>
<!-- the actual canvas with the image, is being generated client-side after file selection -->
<canvas class="canvas-thumbnail" height="518" width="691"></canvas>
</div>
</div>
</div>
Relevant CSS:
#media (min-width: $screen-xs-min) {
.thumbnail canvas.canvas-thumbnail { height:72px !important; width: 96px !important}
.knob-progress {width: 64px; height: 64px}
}
$screen-xs: 420px !default;
$screen-xs-min: $screen-xs !default;
EDIT: other screen size css
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
#media (min-width: $screen-sm-min) {
.thumbnail canvas.canvas-thumbnail { height:64px !important; width: 86px !important}
}
#media (min-width: $screen-md-min) {
.thumbnail canvas.canvas-thumbnail { height:95px !important; width: 126px !important}
}
There are two other screen resolution. You must handle all.
e.g. you have resolution: 800x600 but if you rotate phone you now have 600x800.
You must see thresholds in bootstrap about width and handle.
Related
I have a chatbot window and have to position that on fixed right-bottom. I have put CSS settings below for fixed positioning as well as viewport settings.
The chat windows in CSS fixed bottom right is having a textbox at the bottom.
In Android devices, when that textbox is in focus, the soft keypad is appearing over the textbox, without the normal behavior of the movnig webpage above and positioning textbox above the keypad. So users cannot see what they are typing.
Screenshot : https://ibb.co/G0mNQV8
When I changed the CSS position of the chat window to absolute, then keypad in focus works fine as usually. But when not in focus if scrolled, the entire chat window is moved up, instead of being fixed in bottom-right.
I need to fix both cases, to gain normal behavior of soft keypad in focus and also, fixed positioning.
Please refer to the following code snippets and if you can help to resolve it, it would be great.
#viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
#-ms-viewport {
min-width: device-width ;
zoom: 1.0 ;
initial-scale:1.0;
maximum-scale:1.0;
user-scalable:1.0;
}
#live-chat {
display:none;
bottom: 0;
right: 0;
position: fixed;
width: 99% !important;
max-width:350px;
max-height:100vh;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 10000; box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-container">
<div id="live-chat">
<header class="clearfix">
x
<h4> <img src="https://www.xxxx.com/chat/cf-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;">Powered by xxx.com</div>
</div>
</div> <!-- end live-chat -->
I found a solution for the issue and posting it here as it will be helpful for anyone having the same issue.
I did wrap chat window outer div, with an extra div, gave it fixed position and top, bottom 0.
Then changed the position of chat window div to 'relative and have height of 93.9% of its container.
Above two helped to fix both scrolling issue (to keep chat window fixed to bottom right) and avoiding soft keypad to covering textbox
In android another issue was noted after this, soft keypad was appearing even after textbox loses its focus, so used following js function taken from here .
#live-chat-wrapper{
bottom: 0;
right: 0px;
position: fixed;
width: 99% !important;
max-width:351px;
max-height:484px;
margin: 0;
z-index: 100000;
-webkit-transform: translate3d(0,0,0);
}
#sigiriyalive-chat {
display:none;
bottom: 0;
right: 0px;
position: relative;
width: 99% !important;
max-width:350px;
height: 93.9%;
transition: height 1s ease;
background: #e9e9e9;
color: #eae2e2;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
z-index: 1000001;
box-shadow: 0px 0px 20px 4px #ccc;
}
<div id="live-chat-wrapper">
<div id="live-chat">
<header class="clearfix">
x
<h4> <img src="https://www.wm.xxx.com/chat/xx-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
<span class="chat-message-counter">3</span>
</header>
<div class="chat">
<div class="chat-history">
</div> <!-- end chat-history -->
<p class="chat-feedback" style="display:none;">Your partner is typing?</p>
<form action="#" method="post" onsubmit="return chatsend();">
<fieldset class="cbtgroup">
<input type="text" placeholder="Type your message?" id="cbt" autocomplete="off"><input type="submit" value="»" class="cbt" id="cbtbtn">
</fieldset>
</form>
<div style="font-size:xx-small;text-align:center;">Powered by xx.com</div>
</div> <!-- end chat -->
</div> <!-- end sigiriyalive-chat -->
</div>
function hidekeyboard() {
//this set timeout needed for case when hideKeyborad
//is called inside of 'onfocus' event handler
setTimeout(function() {
//creating temp field
var field = document.createElement('input');
field.setAttribute('type', 'text');
//hiding temp field from peoples eyes
//-webkit-user-modify is nessesary for Android 4.x
field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
document.body.appendChild(field);
//adding onfocus event handler for out temp field
field.onfocus = function(){
//this timeout of 200ms is nessasary for Android 2.3.x
setTimeout(function() {
field.setAttribute('style', 'display:none;');
setTimeout(function() {
document.body.removeChild(field);
document.body.focus();
}, 14);
}, 200);
};
//focusing it
field.focus();
}, 50);
}
I want to show a small colored dot in front of a price tag. The dot should be centered vertically next to the price and scaled up a bit.
This works on chrome desktop, iOS, Safari and others.
But on Android the dot is huge and takes up the entire space of the div.
.item.green::before {
content: "●";
color: #7ED321;
}
.item {
transform: scale(1.4);
display: inline-block;
vertical-align: text-top;
}
.priceText {
bottom: 20px;
}
<div class="priceText">
<span class="item green" style="" title="Verfügbarkeit"></span> 1.050 €
</div>
How can I center the dot verically and make sure in Android it is shown with the scale factor provided?
Consider a simple background instead where you can easily adjust the size and position.
You can also consider CSS variable to adjust the color:
.priceText {
padding-left: 15px;
background:radial-gradient(var(--c,#7ED321) 4px,transparent 5px) /*4px radius*/
left center /*position*/
/
10px 10px /*size: must be at least 2xradius*/
no-repeat;
}
.orange {
--c:orange;
}
<div class="priceText">
1.050 €
</div>
<div class="priceText orange">
1.050 €
</div>
Another syntax:
.priceText {
padding-left: 15px;
background:
radial-gradient(circle at 5px 50%, var(--c,#7ED321) 4px,transparent 5px)
no-repeat;
}
.orange {
--c:orange;
}
<div class="priceText">
1.050 €
</div>
<div class="priceText orange">
1.050 €
</div>
You can use media query to control what happens when the screen size is scaled down to Android
#media screen and (min-width: 400px) {
.items {
transform: scale(1.4);
}
}
I have a simple overlay <div> tag which puts some text on top of an image. Here is the HTML code:
<div class="single_image">
<div id="example-1" class="thumbs">
<a href="images/photos/01/DSC05689.jpg">
<img src="images/m1.png" alt="">
</a>
</div>
</div>
<div class="overlay">Tap to view</div>
</div>
This is what the code looks like in Chrome browser on a desktop machine:
But if I open the page in Chrome on Android, the text falls down below the image and this is what I get:
This is my CSS:
.overlay {
pointer-events: none;
position: absolute;
top: 25px;
right: 50px;
width: 200px;
height: 25px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
What could be the cause of this?
It seems to have been an issue with browser cache. If I opened the page on an incognito tab on Android, it worked as expected.
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
Hey guys,
my header and footer background image not displaying correctly on mobile devices like android or iPhone, same goes for the iPad, the background image for header and footer is not getting displayed correctly, resulting in a cropped background image.
I tried with javascript and css, and technique after technique, but nothing works. It is neither one nor the other of these styles work on my WordPress website www.awebdesign.co.uk and I don't know what do with my mobile site anymore. I tried overflow-x: hidden; but did not want to do anything.
Tried these styles below
.header {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
I also tired the following for the footer, but deleted it later because it didn't do anything good:
footer.footer {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
Than I've implemented media queries,
#media only screen and (max-device-width : 480px)
#media only screen and (max-width: 768px)
#media only screen and (max-width: 1024px
and later changed to this,
#media screen and (max-width: 480px)
#media screen and (min-width: 768px) and (max-width: 979px)
#media screen and (min-width: 981px) and (max-width: 1024px)
However, it displays only the starting position of a background image on the left side. It doesn't display correctly across horizontal line, it displays vertically rather than horizontally. Please help me to find a solution to this problem and consequently learn how to apply CSS background image properties to both mobile and tablets (portrait or landscape).
I think my question is clear but if you have any questions, feel free to to ask, and I hope that others find this helpful too. Thanks in advance!
I deleted the CSS code above to clear my custom styles, the document structure, an HTML5 page, and classes will now look something like this:
<!doctype html>
<html>
<body>
<header class="header">
<div class="container">
<div class="panel_1"></div>
</div>
</header>
<section class="middle">
<div class="container">
<div class="full_width"></div>
</div>
<div class="clear"></div>
</section><!-- .middle -->
<footer class="footer">
<div class="container">
<div class="footer-nav">
</div>
</div>
</footer>
</body>
</html>
.container {
width: 940px;
margin: 0 auto;
}
.container:after {
content: "";
display: table;
clear: both;
}
.panel_1 {background:url(images/panel_0.jpg) left top no-repeat;
width: 940px;
height: 270px; /*border: 1px solid #09F;*/}
section.middle {background: #CCC; clear: both;}
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
footer.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
footer.footer {padding: 36px 0; clear: both;}
.footer-nav {float: left;}
I think you mixed up the value cover with contain.
Contain will make your images snap to the width of the viewport and not scale them up until they meet the bottom of the element they are residing in.
Hope this helps. =)
I'm developing a phone-gap application and testing it on 3 android devices. Some codes are:
Main area:
<body>
<div data-role="page" id="home">
<div class="banner"></div>
<div id="another_div">Welcome</div>
<div class="blank_div"></div>
<img src="img/connecting2.png" alt="Loading..." id="loading"/>
<div data-role="footer" class="footer_div">
</div><!--Footer-->
</div>
</body>
Some css:
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
display:block;
background-color:#FF0;
}
#now_play_div
{
white-space:pre-wrap;
font-size:1.5em;
position:fixed;
height:7%;
display:block;
background:#FFF;
width:100%;
text-align:center;
top:30%;
padding-top:1%;
-webkit-marquee: auto medium infinite scroll normal;
overflow-x: -webkit-marquee;
border-radius:10px;
}
.blank_div
{
width: 100%;
min-height:41%;
max-height:41%;
margin-left:auto;
margin-right:auto;
display:block;
}
.footer_div
{
color:#FFF;
position:fixed;
height:10%;
display:block;
background:#46639d;
width:100%;
text-align:center;
bottom:0px;
padding:1%;
}
Now the banner is fixed. blank_div is used so that my main content doesn't go under the fixed banner. After some work the loading image will be gone and filled with some dynamic content. I can scroll that content but my banner and footer is fixed. another_div is fixed too.
This system works perfectly on Sony ericsson(android version:2.3) and symphony(android version:4.0.4). But fails to work properly on Google nexus 7(Android: 4.3) In nexus while I scroll my main content that is dynamically loaded just under the blank_div the banner started to fall down. WEIRD!!!!!! While my contents go up, banner comes down. But in other 2 devices it works just fine. Does anybody know what's wrong?? Or what I'm missing?
I guess no more answer will come. So here is the answer which I found from #Era's comment.
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
left:0%;
display:block;
background-color:#FF0;
}