PhoneGap : CSS does not load when I change html location - html

Recently I have developed a phone application using PhoneGap. I wanted to rearrange my HTML file because I have many pages for my application.
Originally, all the HTML pages are put under "WWW" folder. I have created a folder under "WWW" and put my HTML page inside. However, after I did arrange my HTML pages, I found out that the HTML pages which I have arranged in folder "WWW/html" are not able to read the CSS file from ("WWW/CSS"). Is there any way to solve this problem?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<link href="mdb.min.css" rel="stylesheet" />
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
Click here for Pic

Related

why my shtml file is no getting called in plesk panel?

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Beorx - Creative Agency HTML5 Template" />
<meta name="author" content="ThemeOri">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title of Site -->
<title>Protonix</title>
<!-- Favicons -->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Swiper -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- Magnific -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Nice Select -->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!-- Mean menu -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- Flaticon -->
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/sass/style.css">
<!--#include file="header.shtml"-->
</head>
above is the code of my html plesk panel file I copied data of header.shtml from the same file and then removed that data from source file while keeping those in header.shtml without making any change but issue is the file header.shtml is not getting called any solution for it?

iOS safari add to home screen of my angular web app icon coming as screenshot instead of apple-touch-icon

When I'm trying to add my angular web app as a shortcut to my home screen from my iOS safari it is coming as a screenshot of my app page, although I added an apple-touch-icon link to my index.html. where my image is 150*150 size and a png. below is my HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insights</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="src/assets/icons/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="manifest" href="manifest.webmanifest">
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
After some research found that it is my bad having src in the below line.
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
changed it to the below worked
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon-150x150.png">

Bootstrap and/or media queries not working on Github Pages

I want to host a website using GitHub Pages. I was able to upload it, and it works perfectly on a computer. However, when I open it on a phone the Bootstrap and/or media queries is not working, because the website looks like its shrink to fit, instead of taking the responsive layout I coded.
Right now my files look like:
index.html
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- JS (end of body) -->
<script src="js/custom.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
responsive.css
#media only screen and (max-width: 768px){
.header-picture{
display: none;
}
The problem is that on my phone the website looks like this: non-responsive
When it should look like this (according to responsinator): responsive
I followed
Bootstrap / CSS not working on Github Pages
and tried to fix it by adding the file location on github. However, I got the same result
index.html
<!-- Meta tag for responsive websites -->
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/style.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/responsive.css">
<!-- JS-->
<script src="https://EmiliaPaz.github.io/js/custom.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.js"></script>
<script src="https://EmiliaPaz.github.io/js/bootstrap.min.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.bxslider.js"></script>
What I find really curious is that when I put my website URL (https://emiliapaz.github.io/) on responsinator.com , it shows that it should work on smaller screens but it doesnt!
Thanks for the help, I am really stuck
There's a typo with your <meta> tags (width-device-width).
Change from:
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
to
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Meta viewport needs to fit the device width on safari IOS.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For More Info Reference Stack Question below:
What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

convert Html to Cshtml

How do I convert this to cshtml with razor tags?
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>Modals | SHARED ON THEMELOCK.COM</title>
<meta name="keywords" content="HTML5 Admin Template" />
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="assets/vendor/pnotify/pnotify.custom.css" />
<!-- Theme CSS -->
<link rel="stylesheet" href="assets/stylesheets/theme.css" />
<!-- Skin CSS -->
<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">
<!-- Head Libs -->
<script src="assets/vendor/modernizr/modernizr.js"></script>
</head>
Lets start a journey:
Open HTML document
Click CTRL+A
Click CTRL+C
Enter to your solution directory
Create new empty *.cshtml file
Click CTRL+V
That's all - it will be work. (In future add in tags what version of .Net are you using and what exactly need because my answer is correct to your question. For more information about Razor read this)
Create a new cshtml file. and paste your code

How would I import multiple css files into a html page using only one css

Basiclly, I have this html page. (just put the head part in)
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- TITLE -->
<title>Page Title</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Grid CSS & Content -->
<!-- Personal CSS -->
<link href="css/flatcolor.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Dosis:200,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
</head>
What I would like to do, is combine my personal CSS files into one large css file.
Example of What I would like to see.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- TITLE -->
<title>Page Title</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Grid CSS & Content -->
<!-- Personal CSS -->
<link href="css/importall.css" rel="stylesheet">
</head>
I would want the importall.css file have the info to load all of the other css files within the project (it would be noted within the css file which ones I want imported). Any Help?
Use a global.css document to import them all
i.e. Create a new CSS file entitled 'global.css' or something like that and add all of the import statements to the other CSS files:
#import url('typography.css');
#import url('layout.css');
#import url('color.css');
And then you would reference that in your HTML document..