I tried fetching the bodyHTML using the following code
MCOIMAPFetchContentOperation * op = [imapsession fetchMessageAttachmentOperationWithFolder:folderName uid:uid partID:partId encoding:MCOEncoding8Bit
And I got the bodyHTML with some unwanted extra code. The Html I got for one of the mail is
<div style="padding-bottom: 20px;"></div><div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org=
<br/>/TR/xhtml1/DTD/xhtml1-strict.dtd">
<br/><html xmlns=3D"http://www.w3.org/1999/xhtml">
<br/><head>
<br/><meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf-8" />
<br/><meta name=3D"viewport" content=3D"width=3Ddevice-width" />
<br/><meta http-equiv=3D"X-UA-Compatible" content=3D"IE=3Dedge" />
<br/></head>
<br/><body style=3D"-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; =
<br/>background: #EEEEEE; color: #222222; font-family: 'Open Sans', Arial, sans-=
<br/>serif; font-size: 14px; font-weight: normal; line-height: 22px; margin: 0; =
<br/>min-width: 100%; padding: 0; text-align: left; width: 100% !important" bgco=
<br/>lor=3D"#EEEEEE"><style type=3D"text/css">
<br/>body {
<br/>width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -m=
<br/>s-text-size-adjust: 100%; margin: 0; padding: 0;
<br/>}
<br/>.ExternalClass {
<br/>width: 100%;
<br/>}
<br/>.ExternalClass {
<br/>line-height: 100%;
<br/>}
<br/>#backgroundTable {
<br/>margin: 0; padding: 0; width: 100% !important; line-height: 100% !important=
<br/>;
<br/>}
<br/>img {
<br/>outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; widt=
<br/>h: auto; max-width: 100%; float: left; clear: both; display: block;
<br/>}
<br/>body {
<br/>color: #222222; font-family: "Open Sans", Arial, sans-serif; font-weight: n=
<br/>ormal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
<br/>}
<br/>body {
<br/>font-size: 14px; line-height: 22px;
<br/>}
<br/>a:hover {
<br/>color: #222222 !important;
<br/>}
And I am not able to render it on the web view. But when I tried fetching the body using the following method
MCOIMAPFetchContentOperation * opr = [imapsession fetchMessageOperationWithFolder:folderName uid:uid urgent:YES];
I got the proper body html and was able to render it on the webview .The html I got for the above method is:-
<div style="padding-bottom: 20px;"></div><div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body style=
"-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #EEEEEE; color: #222222; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 22px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important"
bgcolor="#EEEEEE">
<style type="text/css">
/*<![CDATA[*/
body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
#backgroundTable {
margin: 0; padding: 0; width: 100% !important; line-height: 100% !important;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Open Sans", Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
}
body {
font-size: 14px; line-height: 22px;
}
a:hover {
color: #222222 !important;
}
Is there any parser or any other way to get the body html .Since I have to use the method using partID to fetch the bodyHTML.
The issue was while fetching the message using part it always uses the MCOEncoding8Bit for encoding instead of that we have to give the encoding which we get while fetching the message as shown below.
for(MCOAbstractPart *abstractPart in multiAbstractPart.parts)
{
MCOIMAPPart *part = (MCOIMAPPart *)abstractPart;
MCOIMAPFetchContentOperation * op = [imapsession fetchMessageAttachmentOperationWithFolder:folderName uid:uid partID:partId encoding:part.encoding];
}
Related
I'm trying to render a webview in my flutter project.
It's working perfectly for Android in debug and release modes and on iOS in debug mode as well.
However if I upload a build to Testflight, it does not work for some reason.
I've been working with the same code from the past few months and not had an issue with Flutter v1.
I'm attaching a code snippet below. Any help is appreciated.
Snippet:
return Container(
width: size.width,
height: size.height,
child: WebView(
key: UniqueKey(),
initialUrl: renderHTML(width, content!),
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: 'GetImgSrc',
onMessageReceived: (JavascriptMessage msg) {
print('Stef Method Channel ${msg.message}');
Navigator.of(context)
.pushNamed(PhotoViewer.route, arguments: msg.message);
}),
].toSet(),
navigationDelegate: (request) => NewsArticleController()
.navigationDelegate(request, content!, width),
),
);
renderHtml(width, content) {
return Uri.dataFromString(body, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString();
}
Html Snippet:
String body = '''
<html>
<head>
<meta name='viewport' content='initial-scale = 1.0, width=device-width'/>
<style>
html {
width: ${width}px;
}
body {
margin-left: 8px;
margin-right: 8px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #F6F6F6;
}
em {
font-style: italic;
}
.title {
padding: 0 20px;
font-family: Georgia,Times,Times New Roman,serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
line-height: 32px;
color:#3D3D3D;
}
.meta-desc {
margin: 8px 0;
font-size: 16px;
text-align: left;
color: #000000;
font-family: Georgia,Times,Times New Roman,serif;
font-weight: 400;
line-height: 24px;
letter-spacing: 1px;
}
.meta-data {
padding: 12px 0 8px 20px;
color:#818181;
font-size: 12px;
line-height: 20px;
font-family: Georgia,Times,Times New Roman,serif;
}
.hero-img img {
margin-left: -8px;
width: ${double.parse(width)}px;
height: auto;
}
.body-content {
padding: 0 20px;
}
.body-content div, .body-content p, .body-content span {
padding: 0 !important;
margin-bottom: 15px !important;
font-size: 20px;
text-align: left;
color: #000000;
font-family: Georgia,Times,Times New Roman,serif;
font-weight: 400;
line-height: 31px;
}
.body-content img {
width: 100%;
height: auto;
margin: auto;
}
a {
color: #F50057;
text-decoration: none;
font-weight: bold;
}
.yt-iframe {
width: ${double.parse(width) - 16}px;
min-height: 200px;
}
iframe.instagram-media {
margin: 0 auto 10px !important;
/* width: ${double.parse(width) - 16}px !important; */
}
iframe {
margin: 0 8px 10px -8px !important;
width: 100% !important;
}
</style>
</head>
<body>
<div class="hero-img cls-image">
<img src="${content.images?.url}">
</div>
<div style="text-align: end; padding: 16px 20px 8px 0; font-size:12px; color:#818181;">${content.postDateStr}</div>
<div class="title">
${content.title}
</div>
<!--<div class="meta-desc">
${content.metaTagDescription}
</div>-->
<div class="meta-data">
By <span>${content.user}</span>
</div>
<div class="body-content">
$body
</div>
</body>
<script>
var elements = document.getElementsByClassName("instagram-media");
setTimeout(function(){
for (var i = 0; i < elements.length; i++) {
elements[i].style.width=('0px');
console.log('initial width: ' + elements[i].style.width);
elements[i].style.width=('${double.parse(width) - 16}px');
console.log('final width: ' + elements[i].style.width);
}
console.log(elements);
}, 1000);
var images = document.getElementsByClassName("cls-image");
var myFunction = function(event) {
GetImgSrc.postMessage(event.target.src);
};
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('click', myFunction, false);
}
</script>
</html>
''';
Flutter version: Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale en-US
webview_flutter version: 2.0.9
You may need to do more setup for the WebView to work with IOS build - if you're using this package I would suggest taking a look at this and adding in suggested info to your info.plist
https://inappwebview.dev/docs/get-started/setup-ios/
#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?
I have a button being used to show a dropdown div. The button padding and text can be clicked on to show the dropdown div. The very small Material "font-icon" CANNOT be clicked to show the dropdown div. How can I ensure that you can click anywhere within the button (including directly on the Material icon) in order to show the dropdown div.
Here is a link to show you what I've done.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
body {
margin: 0;
color: #333;
overflow-x: hidden;
padding-top: 80px;
}
:root{
var-MainColor: #4C00F9;
--main-color: #4C00F9;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -64px;
}
#navWrapper {
padding: 0px;
border-bottom: 1px solid #eee;
font-size: 13px;
font-family: Sans-Serif;
width: 100%;
background-color: #fff;
z-index: 1000;
height: 64px;
}
#navLeft {
float: left;
}
#navRight {
float: right;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: var(--main-color);
padding: 24px;
font-size: 13px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: var(--main-color);
color: #fff;
outline: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-left: 10px;
margin-right: 2%;
margin-top: -8px;
border-radius: 2px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: var(--main-color);
padding: 24px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #fdfdfd;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.material-icons.md-01 { font-size: 13px; vertical-align: middle; margin-top: -3px;}
.material-icons.md-02 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: red;}
.material-icons.md-03 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: #40FA35;}
.material-icons.md-04 { font-size: 21px; vertical-align: middle; margin-top: -1px;}
.material-icons.md-05 { font-size: 16px; vertical-align: middle; margin-top: -1px;margin-right: 15px;}
#main {
margin-top: 50px;
position: absolute;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 50px 0px;
}
#sectionInnerText {
max-width: 700px;
padding: 0px 100px;
}
#sectionInnerImage {
max-width: 1000px;
padding: 0px 100px;
}
#sectionInnerImage-rowWrapper {
padding: 0px 100px;
}
#sectionInnerImage-3row {
width: 31%;
max-width: 400px;
display: inline-block;
margin-right: 1vw;
}
#sectionInnerImage-2row {
width: 48%;
max-width: 1000px;
display: inline-block;
margin-right: 1vw;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
font-weight: 700;
font-family: Sans-Serif;
}
h2 {
font-size: 22px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 15px;
}
h3 {
font-size: 13px;
font-family: Sans-Serif;
font-weight: normal;
margin-bottom: 30px;
}
h4 {
font-size: 17px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 5px;
margin-bottom: 0;
display: inline-block;
}
p {
font-size: 19px;
line-height: 180%;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: normal;
margin: 15px 0;
}
a.one {
display: block;
color: #fff;
background-color: var(--main-color);
padding: 16px;
text-decoration: none;
text-align: center;
border-radius: 3px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
max-width: 350px;
}
a.one:hover {
background: #4C03F1;
}
a.one:active {
background-color: var(--main-color);
}
#media only screen and (min-width: 1080px) {
section {
min-height: 30vh;
}
}
#media only screen and (max-width: 1080px) {
html, body {
margin: 0;
color: #333;
overflow-x: hidden;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 0px;
}
#sectionInnerText {
padding: 2vh 5vw;
}
#sectionInnerImage {
padding: 0 5vw;
}
#sectionInnerImage-rowWrapper {
padding: 0 5vw;
}
#sectionInnerImage-3row {
width: 100%;
max-width: 1000px;
}
#sectionInnerImage-2row {
width: 100%;
max-width: 1000px;
}
p {
font-size: 21px;
}
ul li {
font-size: 21px;
}
a.one, a.two, a.three, a.four {
display: block;
margin-bottom: 25px;
max-width: 100%;
max-width: 450px;
}
.dropdown-content {
width: 100vw;
margin: 0;
margin-top: -6px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
border-top: 1px solid #eee;
border-bottom: 0;
z-index: 1;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
}
.dropdown-content a{
border-bottom: 1px solid #f4f4f4;
}
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="nav-down">
<div id="navWrapper">
<div id="navLeft">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu <i class="material-icons md-01">keyboard_arrow_down</i></button>
<div id="myDropdown" class="dropdown-content">
<i class="material-icons md-05">home</i> Home & Projects List
<i class="material-icons md-05">dashboard</i> Project 01
<i class="material-icons md-05">dashboard</i> Project 02
<i class="material-icons md-05">dashboard</i> Project 03
<i class="material-icons md-05">account_circle</i> Info & Contact
<i class="material-icons md-05">picture_as_pdf</i> View & Download Resume
</div>
</div>
</div>
</div>
</header>
I applied foundation.css to make my site responsive. But after that tool tips, light box is not working. Fonts are getting larger. Where should I correct in my custom.css or foundation.css
Tool tip not working in this site
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
body,
td.sohotext,
td.text,
p,
span {
font-family: sans-serif, Helvetica, Verdana, Arial;
font-size: 13px;
color: #525252;
line-height: 140%;
}
/* Fixes and hacks */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html input.quick_signup {
background-attachment: fixed;
}
/*END - Fixes and Hacks */
/* Navigation */
#mainnav a:link, #mainnav a:visited {
color: #FFF;
text-decoration: none;
display: block;
padding-right: 13px;
float: left;
padding-top: 5px;
padding-left: 13px;
padding-bottom: 5px;
background-image: url(images/menu_div.jpg);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: right top;
}
#mainnav a:hover {
color: #36CC2F;
background-image: url(images/nav_active.jpg);
background-repeat: repeat-x;
background-position: right top;
padding:4px 12px 4px;
}
.hmains {
font-size: 100%;
}
#megamenu {
list-style-type:none;
width:100%;
margin: 3px auto 04px auto;
height:40px;
padding:2px 0px 3px 0px;
}
table.vmenu_subs {
margin-bottom: 30px;
margin-top: 15px;
}
/*#leftav a:link, #leftnav a:visited, */
a.vmenu_sub_off:link,
a.vmenu_sub_off:visited,
a.vmenu_sub_on:link,
a.vmenu_sub_on:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
font-weight: bold;
color: #000;
background-image: url(images/sideNav_bullet.gif);
background-repeat: no-repeat;
background-position: left center;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #acacac;
text-decoration: none;
padding-left: 24px;
display: block;
width: 150px;
}
/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active {
color: #666;
}
a:link, a:visited {
color: #00CC00;
text-decoration: none;
}
a:hover {
color: #009900;
margin-top:0px;
margin-bottom:0px;
}
#feat a:link, #feat a:visited {
color: #fdb417;
text-decoration: none;
}
#feat a:hover {
color: #fed27e;
}
/*END - Navigation */
#headwrapper {
background-image: url(images/top_bg.png);
background-repeat: 50% no-repeat;
margin: 0px;
padding: 0px;
height: 109px;
position: relative;
}
#featwrapper {
background-color: #1e8019;
height: 124px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #185d14;
overflow: hidden;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #2b9d22;
}
#feat {
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-image: url(images/feat_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 124px;
color: #FFFFFF;
}
#navwrapper {
background-color: #1e8019;
height: 32px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2b9d22;
border-bottom-color: #185d14;
}
#nav {
background-image: url(images/nav_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 32px;
max-width:880px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
}
#contentwrapper {
background-color: #ededf1;
margin: 0px;
padding: 0px;
}
#maincontent {
background-image: url(images/content_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #ededf1;
}
#mainnav {
width: 72%;
float: left;
padding-left: 5px;
}
#signup {
width: 25%;
padding-left: 5px;
float: left;
height: 20px;
padding-top: 2px;
font-size: 85%;
color: #cccccc;
text-align: center;
}
#subnav {
margin: 0px;
float: left;
min-width:155px;
width: 25%;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#belowmenu {
display: block;
float: left;
width: 210px;
padding-top: 15px;
padding-left: 5px;
}
div.sidebox {
display: block;
float: left;
width: 210px;
}
#content {
margin: 0px;
width: 70%;
float: left;
padding-top: 12px;
padding-right: 7px;
padding-bottom: 12px;
padding-left: 7px;
overflow: visible;
}
#date {
font-size: 90%;
text-align: right;
color: #858585;
}
#featleft {
float: left;
width: 25%;
padding-left: 5px;
padding-top: 5px;
}
#featright {
float: left;
width: 72%;
padding-left: 10px;
padding-top: 5px;
}
#footer {
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
font-size: 85%;
padding-bottom: 10px;
color: #939393;
}
#head {
height: 109px;
max-width: 880px;
margin-right: auto;
margin-left: auto;
}
#logo_box {
height: 109px;
float: left;
width: 28%;
}
#tagline {
float: left;
width: 70%;
color: #999999;
text-align: right;
padding-top: 22px;
}
#logo {
position: absolute;
top: 3px;
}
#trimbar {
background-color: #000000;
margin: 0;
padding: 0;
height: 7px;
width: 100%;
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
div.newsbox {
line-height: 115%;
}
/*hiding from IE mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* end hiding from IE mac */
#footerwrapper {
width: 100%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #959595;
background-color: #CCCCCC;
}
/* Integrated Styles */
.portfolio {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
width: 100%;
overflow: auto;
}
span.alert,
span.profile,
span.download,
span.search {
display: block;
float: left;
margin: 10px;
padding: 10px 10px 10px 45px;
}
span.alert {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_alert.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.profile {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_profile.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.download {
width: 100%;
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_download.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.search {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_search.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.product {
color: #333333;
background-color: #fff;
border: 1px solid #b6b6b6;
margin: 10px;
padding: 10px;
font-size: 10px;
line-height: 145%;
display: block;
}
blockquote {
border-top: 4px solid #D3D3D3;
border-bottom: 4px solid #D3D3D3;
margin: 10px;
padding: 10px 10px 5px 45px;
background-color: #f5f5f5;
background-image: url(images/quote1.png);
background-repeat: no-repeat;
background-position: 5px 5px;
}
blockquote p {
padding-right: 35px;
background-image: url(images/quote2.png);
background-repeat: no-repeat;
background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li {
background-image: url("images/li_bullet.gif");
background-position: 0px 4px;
background-repeat: no-repeat;
overflow: hidden;/* added by dsonesuk as li cannot detect area of floated 'a' elements*/
padding-left: 14px;
margin-left: 0px 4px;
font-size: 12px;
}
ul, li {list-style-type:none !important;}
}
h4 {
font-size: 115%;
color: #333;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
#feat h4 {
color: #fdb417;
}
h4 {
font-size: 120%;
color: #0066FF
}
h3 {
font-size: 150%;
color: #1E7D19;
}
h2 {
font-size: 180%;
color: #196115;
}
input.login_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/login_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.pass_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/password_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.quick_signup {
border: 0;
height: 19px;
width: 168px;
padding-left: 32px;
padding-top: 3px;
margin-top: 4px;
background-image: url(images/quick_signup_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #ededed;
}
div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10
{
padding-left: 28px;
padding-bottom: 10px;
background-image: url(images/answer.gif);
background-repeat: no-repeat;
background-position: 2px 0;
}
table#Search_Form,
table#Search_Form2 {
}
table#Detail_Results2,
table#Initial_Results {
margin-top: 15px;
}
.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;
}
#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
padding: 0px!important;
background:inherit!important;
}
#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
bottom: 0;
padding-top: 0px;
position: absolute;
right: 0;
width:62%;
}
#tagline img {
margin: 0px 0px -12px;
height: auto!important;
max-width: 100%;
width: auto!important;
max-height: 68px;
min-height:45px;
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#title#</title>
<link rel="stylesheet" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreen/custom.css" />
<link rel="stylesheet" type="text/css" href="tooltip/themes/2/tooltip.css" />
<link rel="stylesheet" type="text/css" href="lightbox/css/lightbox.css" />
<link rel="stylesheet" type="text/css" href="jsimgslider/themes/8/js-image-slider.css" />
<link rel="stylesheet" type="text/css" href="mactabs/mctabs.css" />
<script type="text/javascript" src="http://www.egtours.com/tooltip/themes/2/tooltip.js"></script>
<script type="text/javascript"src="http://www.egtours.com/sohoadmin/plugins/MegaMenuBuilder/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/mcVideoPlugin.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/js-image-slider.js"></script>
<script src="http://www.egtours.com/float-panel.js"></script>
<script type="text/javascript" src="http://www.egtours.com/mactabs/javascript-tabs.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://www.egtours.com/motionpack.js"></script>
<script src="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/js/vendor/modernizr.js"></script>
</head>
<body>
<body onload="slidedown('featwrapper');">
<div id="headwrapper">
<div id="head" class="clearfix">
<div id="logo_box"><img id="logo" border="0" alt="Home" width="322" height="118" src="images/_userimg-logo.png" /></div>
<div id="tagline"><img border="0" alt="Home" width="468" height="60" src="images/_userimg-ad_banner.png" /></div></div></div>
<div id="trimbar"></div>
<div id="featwrapper" style="display: none; height: 124px; overflow: hidden">
<div id="feat" class="clearfix">
<div id="featleft">#NEWSBOX#</div>
<div id="featright">#PROMOTXT1#</div></div></div>
<div id="navwrapper">
<div id="nav" class="clearfix">
<div id="signup"><img style="border: 0pt" border="0" alt="Toggle the banner up or down" width="110" height="27" src="images/hide-show.png" /></div>
<div id="mainnav">#MEGAMENU#</div></div></div>
<div id="contentwrapper">
<div id="maincontent" class="clearfix">
<div id="subnav">#VSUBS#
<div id="belowmenu">#POWERPLUG4#</div></div>
<div id="content">
<div id="date">#AUTODATESTAMP#</div>#CONTENT#</div></div>
<div id="footerwrapper">#COPYRIGHT#<div id="footer">
<table id="table1" border="0" cellspacing="1" width="100%">
<tbody>
<tr>
<td colspan="7" align="left">
<p align="center"><a title="" href="../../../../../../../Our_Policies.php">Our Policies</a>| Privacy Statement</p></td></tr>
<td width="60"><img border="0" alt="coat of arm" width="66" height="56" src="../../../../../../../images/logos/coatofarm.png" /></td>
<td width="152"><img border="0" alt="natta logo" width="53" height="56" src="../../../../../../../images/logos/nattalogo.png" /></td>
<td width="55"><img border="0" alt="uftaa logo" width="80" height="56" src="../../../../../../../images/logos/uftaa.png" /></td>
<td width="71"><img title="" alt="skull logo" width="75" height="36" src="../../../../../../../images/paybyskull.png" /><br />
</td>
<td width="71">
<p><img title="" alt="paypal logo" width="57" height="57" src="../../../../../../../images/paypalv.png" /></p></td>
<td width="26">
<p><img title="" alt="vitof logo" width="97" height="73" src="../../../../../../../images/vitof_logo.png" /></p></td>
<td width="90"><img border="0" alt="SSL" width="90" height="50" src="http://www.egtours.com/images/rapidssl_ssl_certificate.gif" /></td></tbody></table></div></div>
<script type="text/javascript" src="http://www.egtours.com/lightbox/js/lightbox.js"></script>
<div id="backtop">▲</div>
#jquery#
<script>
/* Remove the slogan div cleanly if it's not in use */
$(function () {
if($(".slogan").html().length === 0) {
$(".slogan").remove();
}
/* Expand the content area out if the sidebar isn't in use */
if (!$("#box-one").text().trim().length){
$(".middle").addClass("large-12").removeClass("large-8");
$(".box").remove();
}
});
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Your path's to foundation.tooltip.js and to foundation1.css are incorrect and they are not loading, therefore no tooltips. If you want your own custom.css file to override any of foundation's css, it needs to load after foundation1.css.
{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.