Below is the code that I'm using to build a page on my website. I'd like the video that I have set to display in the background across the entire screen. I've been able to achieve this on a PC, portrait on a mobile device (I'm currently using an iPhone 12 pro), and on landscape on a mobile device.
However, I'm noticing two issues at the moment. The first issue is that on a mobile device I'm able to scale the video to any size that I'd like. The second issue is that when placing my mobile device in landscape and refreshing the pages a few times the video scales down and doesn't display across the entire screen.
How can I set the video so that no matter what device someone is using it can't be rescaled? And how can I have the video be played full across any screen of any device? The answer to the solution seems to lie within the meta tag, no matter what I do with the CSS it doesn't change the size of the video to fit a mobile device.
<!DOCTYPE html>
<html>
<meta name="viewport" content="viewport-fit=cover, user-scalable=no" charset="utf-8">
<body>
<title>MORIKOBOSHI - 公式ウェブサイト・Official Website</title>
<div class="video-container">
<video src="Home_Page.mp4" autoplay loop muted playsinline style="z-index: 100px; overflow: hidden; object-fit: cover;"></video></div>
<div class="relative">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;">
</div>
<div class="absolute">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;">
</div>
<div class="home_page">
<p style="text-align: center; font-size: 40px; font-family: sans-serif; overflow: hidden;"><b>日本語</b> | <b>English</b></p></div>
<style>
.relative {
font-size: 25px;
}
.absolute {
font-size: 13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
font-size: 11px;
}
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
font-size: 6px;
}
}
video {
object-fit: fill;
}
.video-container {
position: fixed;
text-align: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: 100%;
height: 100%;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.video {
width: 100vh;
}
}
.relative {
position: absolute;
top: -10px;
left: -13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
position: absolute;
top: -15px;
left: -30px;
}
}
.absolute {
position: absolute;
left: 28px;
top: 28px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
position: absolute;
top: 4px;
left: -15px;
}
}
video {
position: fixed;
text-align: center;
object-fit: cover;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
object-fit: cover !important;
-webkit-object-fit: cover !important;
-moz-object-fit: cover !important;
-o-object-fit: cover !important;
}
p {
color: white;
text-decoration: none;
color: white;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
-1px -1px 0 #000;
font-size: 400%;
margin: 50px;
position: relative;
z-index: 3;
}
.home_page {
position: fixed;
top: 520px;
left: 410px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.home_page {display: none;
}
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.home_page {display: none;
}
}
</style>
</body>
</html>
Related
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
tried with this code, still not working. It's fine on every other devices, it's fine in MAC as well, only the problem is on ios responsive devices.
You need to add overflow-scrolling to parent div. Check the below demo
.wrap {
width: 320px;
height: 500px;
position: relative;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
border: 2px solid #ddd;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
position: absolute;
}
<div class="wrap">
<iframe class="iframe" src="https://theimpossiblecool.tumblr.com/"></iframe>
</div>
#using App
#using Helpers
#model App.Model.Cache
#{
ViewBag.Title = #Model.Title;
Layout = null;
}
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/>
#if (!Model.IsBookmark)
{
<link rel="canonical" href="#(Model.CanonicalUrl())"/>
}
else
{
<link rel="canonical" href="#Model.BookmarkURL"/>
}
<style amp-custom>
body {font-family:Lato, Arial;}
.related {
background-color: #f5f5f5;
display: block;
clear: both;
height: 64px;
margin-bottom: 14px;
}
.related > span {
font-size: 16px;
font-weight: 400;
vertical-align: middle;
margin: 8px;
line-height: 1.2em;
height: 64px;
}
.related:hover {
background-color: #ccc;
}
.related-recipes a {
text-decoration: none;
color: #444;
}
.related-image {
width: 64px;
height: 64px;
float: left;
}
.related-text {
display: inline;
vertical-align: middle;
color: #111;
position: relative;
top: 1.2em;
left: .9em;
text-overflow: clip;
word-break: break-all;
word-wrap: break-word;
}
amp-carousel amp-img > img {
object-fit: contain;
}
amp-carousel figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
background: rgba(0, 0, 0, 0.6); /* translucent black */
color: #ddd;
font-size: smaller;
max-height: 30%;
}
amp-carousel .review {
width: 25em;
vertical-align: top;
overflow: auto;
margin: 0;
padding: 16px;
height: 80%; /* TODO easy way to ensure the bottom shadow is visible */
white-space: normal; /* the enclosing div generated by amp-carousel sets it to nowrap */
}
amp-carousel .review:nth-child(even) {
background: #FFFFFF
}
amp-carousel .review:nth-child(odd) {
background: #94C2F9
}
amp-carousel .review h1 {
font-size: larger;
padding: 0;
}
amp-carousel .review p {
padding: 0;
}
amp-carousel .review address:before {
content: '-- ';
}
ul, ol {
padding: 0 16px;
}
/* Unicode-based stars and half-star credit: amoniker, https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8 */
.star-icon {
color: #ddd;
font-size: 34px;
position: relative;
}
.star-icon.full:before {
color: #FDE16D;
content: '\2605'; /* Full star in UTF8 */
position: absolute;
left: 0;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
.star-icon.half:before {
color: #FDE16D;
content: '\2605'; /* Full star in UTF8 */
position: absolute;
left: 0;
width: 50%;
overflow: hidden;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
.logo {
background-position: left 16px center;
background-repeat: no-repeat;
background-image: url(https://www.bigoven.com/assets/images/icons/bigoven-recipes.png);
background-color: #fefefe;
height: 38px;
text-align: left;
padding: 16px;
padding-left: 72px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.logo > a {
text-decoration: none;
}
.heading {
text-align: center;
padding-bottom: 8px;
}
.heading > #summary {
font-weight: 500;
}
.heading > small {
color: #656565;
}
.lower-wrapper {
margin: 0em 1em 0em 1em;
}
.title-description {
max-width: 310px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
...
</div>
</body>
</html>
I'm having a problem with writing correct 'IF' statement in .NET and AMP. Statment look like this and it placed in a head section where suppose to be. AMP Validator throws me three errors:
Tag outside the body section
and two of 'link rel=cannonical' is 'body', but it can only be 'head'
Here is a code snippet of my if statement from my cshtml template:
#if (!Model.IsBookmark)
{
<link rel="canonical" href="#(Model.CanonicalUrl())"/>
}
else
{
<link rel="canonical" href="#Model.BookmarkURL"/>
What is the correct way to handle if statement in AMP?
view it on jfiddle. (you may need to add the frameworks: jquery 1.11.0, then tick the box for jquery mobile 1.4.4. I tried adding the resources for the versions I use (1.11.1 and 1.4.5 respectively -- but the pages don't render from their link. Sorry 'bout that.)
When I add data-position='fixed' to my footer on a page that has, a reduced width on larger screens (set with a media query in css) and a nav-panel that says open on larger screens using the data-display="reveal" or "push" (no problem with "overlay"), when I open the nav-panel (icon in upper left of header) the footer slides right as it should, but does not resize, and the contents are not centered. The re-sizing toggles if I click on the background, but the content never centers. I've settled on "overlay" as a temporary fix, but I'd prefer to use "reveal" (the default). Much of the CSS for the nav-panel is borrowed from the jquery mobile demos.
To duplicate the problem on the fiddle, use a wide screen and enlarge the output panel so that you see the gradient background, then click on the menu button (bars). After that you can see the footer slide (but not adjust its width) and slide back to an adjusted width (but not center the icons in the footer).
Any ideas what I did wrong or what CSS might resolve the issue?
Here's the html:
<body>
<div data-role="page" id="index-page" class="ui-responsive-panel" data-title="MMT" data-url="index-page" data-theme="a">
<div data-role="header" >
<h6 class='header' style="overflow:visible !important;">Test Page</h6>
Contact
</div><!-- /header -->
<div data-role="panel" class="jqm-navmenu-panel" data-position-fixed="true" data-display="reveal" id="index_nav-panel">
<ul data-role="listview">
<li>Close Menu</li>
<li>Blah</li>
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
</ul>
</div>
<div role="main" class="ui-content"><div class="banner">Banner Image </div>
<p>text</p>
<div style='margin-top:44px;'>
<ul data-role="listview">
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
<li>Baz</li>
<li>Biz </li>
</ul>
</div>
<div data-role='collapsible' class='ui-nodisc-icon' data-collapsed-icon="home" data-expanded-icon="carat-u" data-mini='true'>
<h3>Follow...</h3>
<p>Follow us on Twitter:</p>
</div>
</div>
<div data-role='footer' data-position='fixed'>
<div class='footer'>
Contact Phone:
Twitter
</div>
</div><!-- /footer -->
here's the css
/*css file for mobile website*/
#media all and (max-width: 50em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
.banner img{
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto
}
/* set a width for wide screens */
.collapsible {
max-width:900px;
}
/* to center the content on wide screen pc or laptop */
#media only screen and (min-width: 1025px){
.ui-page{
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
/*border-right: 3px rgb(93, 105, 105) outset !important;
border-left: 3px rgb(93, 105, 105) outset !important;*/
}
.ui-footer {
max-width: 960px !important;
margin: 0 auto !important;
}
}
.header, .firm {font-family: 'IM Fell French Canon SC', serif !important;}
.firm{font-size:1.2em; font-weight:bold;}
.ui-header .ui-title {
margin-right: 10%;
margin-left: 10%;
}
/*panel background color*/
div#index_nav-panel{
background-color: rgba(91, 95, 97, 0.1) !important;
}
/*panel stays open on desktops*/
#media (min-width:35em) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel- page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel- page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
div.footer {
text-align: center;
letter-spacing: .2em;
font-size: 1em;
}
}
/* #### target mobile devices with max device width 480px #### */
#media screen and (max-device-width: 480px){
div.footer {
font-size: .75em;
}
div.footer a.ui-btn {
margin-top: 0.1em !important;
}
}
div.footer {
text-align: center;
/* font-size: .75em;
*/}
.footer-text{
color: #999;
margin-left:-8px;
}
/*popup dialog background color*/
div#popupSocialMedia, div#popupDialog {
background-color: rgb(237,237,237);
}
div#popupDialog .ui-content {
height: 50%;
}
div.ui-content { background-color: #f9f9f9 !important;}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a {
background-color: rgb(10, 10, 10) !important;
background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(#efefef,#000000) fixed; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#efefef,#000000) fixed; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#media (min-width: 60em) {
.jqm-demos .jqm-header h2 {
padding: 1em 0 .7em;
margin: 0 1em 0 3%;
text-align: left;
}
.jqm-demos .jqm-header h2 img {
width: 275px;
height: 78px;
}
.jqm-demos .jqm-header p {
bottom: auto;
left: auto;
top: 50%;
right: 15%;
font-size: 1.2em;
margin-top: -.625em;
}
.jqm-demos .jqm-navmenu-link {
display: none;
}
.jqm-demos .jqm-search-link {
right: 3%;
}
.jqm-demos .jqm-footer p {
float: right;
margin: 1.5em 3% 1.5em 1.5em;
}
.jqm-demos .jqm-footer p:first-child {
float: left;
margin: 1.25em 1.25em 1.25em 3%;
}
.jqm-demos .jqm-navmenu-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.jqm-navmenu-panel .ui-panel-inner {
margin-top: 3em;
margin-bottom: 3em;
}
.jqm-navmenu-panel .ui-listview .ui-btn {
padding-left: 12.5%;
text-shadow: none !important;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
padding-left: 15%;
}
.jqm-navmenu-panel .ui-collapsible,
.jqm-navmenu-panel .ui-collapsible-content,
.jqm-navmenu-panel .ui-btn {
background: none !important;
border-color: #ddd !important;
}
.jqm-navmenu-panel .ui-btn.ui-btn-active {
color: #3388cc !important;
}
.jqm-navmenu-panel .ui-btn::after {
opacity: 0;
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.jqm-navmenu-panel .ui-btn:hover::after {
opacity: .6;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
left: -17em;
right: 17em;
}
}
I've omitted the javascript... from here and the fiddle.
Thanks for looking at this...
screenshot of the footer extended
...screen shot of the footer retracted after clicking on the background
The problem goes away if I remove "data-position="fixed" from the footer.
Posting my own answer at #twisty's suggestion. See his comments, too.
It turns out that since I found a different stackoverflow solution to keep my pages full size, my display is the same without data-position="fixed"... so I just removed it and all works as it "should". I'm curious to know why the footer doesn't work the same as the header, but don't want to spin anyone's wheels since I can now move forward without the issue
In case anyone wants to know where my 'fix' was, it's thanks to #ezanker, whose jfiddle shows the code: jsfiddle.net/zKS76/19 and Omar, whose answer to the op's question on so is stackoverflow.com/questions/21552308/…;.
#twisty suggests the reason that headers and footers behave differently: " When it is "fixed" it's removed from that wrapper and has a z-index of 1000, and is sort of stand alone from the rest of the page. "
{please update the english later, I dont want this question to go into the state of limbo }
Ios's webview loads this static content from a url.
For some reason it has issues with its width. It slides left and right even when I have given width of 100%. I've no understanding of ios webview.
Any help would be great.
Here's the html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<!-- for Facebook -->
<meta property="og:title" content="fb-title" />
<meta property="og:type" content="https://somedomain/#/login" />
<meta property="og:image" content="http://somedomain.com/en-us/images/WebsitePieces/homepage/A_header-vmc3030-camera-water-photo-large.png" />
<meta property="og:url" content="https://somedomain/#/login" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '625280937908870606983',
xfbml: true,
version: 'v2.3'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- <button onclick="gogogo()">Share me, please 2</button> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function gogogo() {
FB.ui({
method: 'feed',
link: 'somedomain.com',
picture: 'http://www.somedomain.com/en-us/images/WebsitePieces/homepage/social_share.png',
name: 'somedomain',
caption: 'Learn how easy somedomain is!',
// description: 'Must read daily!'
});
}
</script>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.2.16/angular.js"></script>
<!-- <script src="https://somedomaindev.netgear.com/js/angulike.js"></script> -->
<script src="angulike.js"></script>
<!-- build:css styles/main.css -->
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script>
angular.module('myApp', ['angulike'])
.run([
'$rootScope',
function($rootScope) {
$rootScope.facebookAppId = '625280937606983';
}
])
.controller('myController', [
'$scope',
function($scope) {
$scope.myModel = {
Name: "Installing somedomaincameras is a breeze. Took me less than 10 minutes because it is truely wirefree #somedomain",
ImageUrl: 'img/B_platform.png',
FbLikeUrl: 'http://somedomain.com'
};
}
]);
</script>
<style>
#font-face {
font-family: myFirstFont;
src: url(styles/2BF294_D_0.woff);
}
#font-face {
font-family: 'MorebiRounded-Regular';
src: url('webfonts/2BF294_D_0.eot') format('embedded-opentype'); /* IE9 + later */
src: url('webfonts/2BF294_D_0.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('webfonts/2BF294_D_0.woff') format('woff'); /* Newer browsers */
src: url('webfonts/2BF294_D_0.ttf') format('truetype'); /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('webfonts/2BF294_D_0.eot.svg#Min_font + regular, italic, bold) format('svg');
}
$icon-font-path: '../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/';
#import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white !important;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
padding: 0px 0px 0px 0px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
p + h4 {
margin-top: 28px;
}
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
background-color: #f0f0f0 !important;
// height:200px;
padding: 0px 0px 0px 0px;
}
}
#media screen and (min-width: 768px) {
.green-p {
color: red;
font-size: 18px;
margin-right: 26px;
/*margin-left: 15px;*/
}
}
.green-p {
color: green;
font-size: 18px;
margin-right: -16px;
margin-left: 3px;
}
.push-down-1 {
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 0px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
#close {
box-sizing: border-box;
color: rgb(68, 68, 68);
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
align-self: stretch;
border: 0px none rgb(68, 68, 68);
border-radius: 5px 5px 5px 5px;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
/* #close:before {
box-sizing: border-box;
color: rgb(187, 187, 187);
cursor: pointer;
display: block;
height: 30px;
position: absolute;
right: 3px;
text-align: center;
top: 3px;
width: 30px;
align-self: stretch;
perspective-origin: 15px 15px;
transform-origin: 15px 15px;
content: '×';
border: 0px none rgb(187, 187, 187);
border-radius: 3px 3px 3px 3px;
font: normal normal normal normal 26px/26px Helvetica, Arial, sans-serif;
outline: rgb(187, 187, 187) none 0px;
}*/
/*#DIV_1:before*/
#DIV_1 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 45px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 22.5px;
transform-origin: 298.508514404297px 22.5px;
background: rgb(211, 211, 211) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 0px none rgb(229, 229, 229);
border-right: 0px none rgb(229, 229, 229);
border-bottom: 0.909090876579285px solid rgb(229, 229, 229);
border-left: 0px none rgb(229, 229, 229);
border-radius: 5px 5px 0 0;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
margin: 0px 0px 0px;
margin-left: 3px;
margin-right: 3px;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
#H3_2 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 36.4488639831543px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 18.2244319915772px;
transform-origin: 298.508514404297px 18.2244319915772px;
border: 0px none rgb(68, 68, 68);
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
margin: 2px 0px 10px 0px;
outline: rgb(68, 68, 68) none 0px;
padding: 11px 0px 0px 33px;
text-align: center;
}
.top-down {
margin-bottom: 1px;
/*padding-bottom: 12px;*/
}
#fb-icon {
cursor: pointer;
display: inline-block;
height: 32px;
position: relative;
vertical-align: top;
width: 32px;
perspective-origin: 16px 16px;
transform-origin: 16px 16px;
background: rgba(0, 0, 0, 0) url(img2/facebook_32.png) repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Helvetica, Tahoma, Arial;
}
/*#SPAN_1*/
.g-plus {
margin-top: 2px;
}
.fb-icon {
margin-top: 1px;
}
#SPAN_1 {
cursor: pointer;
display: inline-block;
height: 28px;
position: relative;
text-align: center;
white-space: nowrap;
width: 60px;
perspective-origin: 30px 11px;
transform-origin: 30px 11px;
background: rgba(0, 0, 0, 0) url(img2/fb-share.png) no-repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Verdana, Helvetica, sans-serif;
padding: 3px 0px;
}
/*#SPAN_1*/
#logo { background: url(; background-repeat: none; width: 236px;
height: 169px;
}
/* iphone5 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.green-p {
color: green;
font-size: 12px;
margin-right: -16px;
margin-left: 3px;
}
#H3_2{
width:auto;
font-size:10px;
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
}
#logo { background: url(i); background-repeat: none; width: 150px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding: 0px 0px 0px 0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 9px;
margin-left: 2px;
margin-right: 2px;
}
}
/*iphone6*/
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.green-p {
color: green;
font-size: 12px;
margin-right: 0px;
margin-left: 15px;
}
#H3_2{
width:auto;
font-size:10px;
}
#logo { background: url(img2/cam.png); background-repeat: none; width: 169px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding-top:0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 30px;
margin-left: 2px;
margin-right: 2px;
}
}
</style>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/iphone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="css/ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="css/ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div class="jumbotron top-down">
<div id="close">
</div>
<div id="DIV_1">
<h3 id="H3_2">
hello I'm dialog header
</h3>
</div>
<div class="row push-down-1">
<div class="col-xs-6">
<!-- <img src="img2/camera_hand.png"> -->
<div id="logo"> </div>
</div>
<div class="col-xs-6">
<div class="row green-p">
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</div>
</div>
</div>
<div ng-controller="myController" class="text-center push-down-2 row">
<div class="col-xs-4 fb-icon">
<span onclick="gogogo()" id="SPAN_1"></span>
</div>
<div class="col-xs-4">
<div tweet="myModel.Name"></div>
</div>
<div class="col-xs-4 g-plus">
<div google-plus></div>
</div>
</div>
<!-- </div> -->
</div>
<!-- jumbotron -->
<!-- container -->
</body>
</html>
WebView has a property -- set scalesPageToFit to TRUE.
I'm working on a site where you have some boxes with background-images as thumbnails. I have to use background-image because the CMS we are working on is pretty old-dated and the client won't change (mon€y is the main-problem).
i figured out a strange behavior in the iOs Safari on the iPad2 & iPhone5 (latest iOS) and don't know why.
Here's my code:
a img,
.thumb,
figcaption,
a:hover .thumb {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.thumb {
height: 250px;
margin-bottom: 28px;
overflow: hidden;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
figcaption {
background-color: #b61910;
background-color: rgba(182, 25, 16, .85);
position: absolute;
height: 39px;
bottom: 35px;
color: white;
width: calc(100% - 30px);
}
figcaption h3 {
font-style: normal;
position: absolute;
bottom: 5px;
margin-top: 0;
margin-bottom: 0;
padding: 10px 0 0 5px;
transition: transform 0.3s;
transform: translate3d(0, 0%, 0);
}
a:hover h3 {
transform: translate3d(0, -20%, 0);
text-shadow: 1px 1px 1px #000;
}
a:hover figcaption {
height: 5px;
}
a:hover .thumb {
background-size: 120% 120%;
opacity: .8
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<a href="">
<div class="col-sm-12">
<figure class="thumb" style="background-image:url(http://lorempixel.com/output/food-h-c-850-890-7.jpg)">
<figcaption>
<h3>Product-Title</h3>
</figcaption>
</figure>
</div>
</a>
</div>
</div>
On my Desktop it shows the whole image but on iOS it looks like it shows the original size inside the thumbnail-box.
How can i solve this problem?
Any help would be great :)
Thanks
moesphemie
Maybe? https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/
Code:
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;