Tested in Opera Mini (v26.0.2254.117551) Android AND Opera Mini iOS (v7.0.5.45389) (as I read this browser has a huge share of the market so it just can't be ignored) - what a mess it made!:
1. I originally used this code (works great all other browsers I tested, except Opera Mini): https://jsfiddle.net/4dcuaen2/
section {
height: calc(100% - (60px + 25px)); }
In Opera Mini:
a. The title image is placed bottom right and half of it cut off
b. The background image is squeezed up to 1" top of screen - if I remove the <section> code background image displays properly.
- So I looked into in flexbox; love it, works great everywhere but flipping Opera Mini (though it states it is supported: http://caniuse.com/#feat=flexbox ).
In Opera Mini:
a. The title image is shoved off to the left showing only part of it - if I add flex-direction: column; image displays stretched out and past screen (row does nothing)
b. The flexbox box is only using up about 70% of screen width and height
c. The background image isn't covering the bottom half of screen but extends to side outside the flexbox
IF I remove 'display: flex;' everything looks great - except image isn't vertically and horizontally centered of course.
This is what I see:
I've included all my other bits (background image, header and footer) to be sure those work too - Here is the code: https://fiddle.jshell.net/rkk4g62b/ And a snippet:
/* chrome android to display background-image */
html{
height:100%;
min-height:100%;
}
body {
overflow-x: hidden;
padding: 50px 20px 0px 20px;/* 50px: for .navbar-fixed-top.*/
font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
font-size: 12px;
/* chrome android to dispaly background-image */
min-height:100%;
/* .end */
/*keep footer at bottom*/
height:100%;
margin:0; /* for footer*/
/* .end*/
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffff;
background-color: #B4A890;
background-image: url("http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg");
background-position:absolute;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* RELEVANT CODE TO CENTERING AN IMAGE HORIZONTALLY & VERTICALLY NO MATTER THE SIZE OF THE WINDOW: */
/* for index.htm responsive container as 'section' codes breaks in Opera Mini. This also breaks; even worse */
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
/* Center title image on index.htm*/
.row.content {
border: 1px solid red; /* visual for testing */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, older Androids */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* MID - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /*breaks in opera mini, including: display: inline-flex; *//* NEW, Spec - Opera 12.1, Firefox 20+ */
/* flex-direction: column; with this it displays the image but stretches it past the box and out of size Opera mini only*/
/* flex-direction: row; this made no changes */
-webkit-flex-align: center; /* OLD… */
-moz-box-align: center; /* OLD… */
-webkit-box-align: center; /* OLD… */
-ms-flex-align: center; /* OLD… */
-webkit-align-items: center; /* OLD… */
align-items: center; /* align vertical */
-webkit-box-pack: center; -moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center; /* align horizontal */
}
/* .END OF RELEVANT CODE */
/* resize images as windows shrinks */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#footer {
width:100%;
min-height:70px; /*for footer background fix*/
bottom:0;
left:0;
font-size: 13px;
/* Container border for visual testing*/
border: 1px solid blue;
}
.foot {
padding: 10px 0;
text-align: center;
color: #ffffff;
font-size:13px;
letter-spacing: 2px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CENTER Test Opera Mini</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/flexbox_center.css" rel="stylesheet">
</head>
<body>
<div class="box">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><!--These tags create the standard 3-line button logo on top right corner -->
<span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span class="caret"></span></a><!--Requires the JavaScript files linked at the end-->
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">AnotherItem</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Header:</li>
<li><a href="#">MoreItems</a></li>
<li><a href="#">MoreItems</a></li>
<li><a href="#">MoreItems</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- /.navigation -->
<!-- screen reader 'alt' substitute for background images -->
<div id="image" role="img" aria-label="description"></div>
<div class="row content">
<img src="http://oi64.tinypic.com/k3sz9x.jpg" width="840" height="166">
</div><!-- /.row content -->
<div class="row footer">
<center>
<TABLE BORDER=0><TR id="sl">
<TD><a href="#" target="_blank" class="tm-social-link"><i class="fa fa-1x fa-facebook"></i>FB</a> </TD>
<TD><a href="#" target="_blank" class="tm-social-link"><i class="fa fa-1x fa-youtube"></i>YT</a> </TD>
<TD><a href="#"<span class="st_sharethis_custom" st_via="XXX" st_msg="#XXX"><i class="fa fa-1x fa-share-alt"></i>SH</a></span></TD>
</TR></TABLE>
</center>
<div class="foot">FOOTER TEXT</div><!--class foot-->
</div><!-- /.row footer-->
</div><!-- /.box-->
<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>Thank you.
EDIT: If this can't be done is there a code that can detect Opera Mini and run a different code - like just <center> ?
