I have two CSS sheets for my website, one main CSS, and one mobile CSS. The problem is that when viewing on a mobile device (iPhone, Android) the two style sheets get mixed up. For example, when viewing the website on an iPhone, some of the styles from the main stylesheet are being applied.
What could be causing this? Below are my CSS declarations:
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<meta name = "viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The main.css file is going to be included whatever device you are looking at the page in, the media query part for the mobile.css will be called in for your given parameters along with the other stylesheet.
If you're having issues with styles being included then either exclude the main.css using a media query or redeclare these styles in the mobile.css file.
Related
I want to use the Google Adsense Auto-Ads with my react application. The react application uses SSR and I have added the code that Google provided me to the head section of the template as shown below.
export default ({ markup, css }) => {
return `<!doctype html>
<html lang="en">
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9999999999999999" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
>
<title>Teach Learn Game</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
a{
text-decoration: none;
color: #bb4d00
}
</style>
</head>
<body style="margin:0">
<div id="root">${markup}</div>
<style id="jss-server-side">${css}</style>
<script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>`;
};
When at the site, I have checked the html code using Chrome tools. I can see the line in the code but unfortunately I have been declined by the Google Adsense review saying I need to Fix some things.
The message from Google specifying the issue is:
We couldn’t find the code on your site. This is because the code is either missing or incomplete, or because the URL of your site is incorrect. Learn more.
I have removed the requirement to login which was an earlier problem and I have a proper google account.
I did see another Stack Overflow issue where it was stated that window.adsbygoogle is to be used with React but it seemed that the problem was dealing more with specifying ad units and the implementation of the window.adsbygoogle was in a component class. As I am using Auto Ads I would not expect that would apply but maybe I am mistaken. If so, how would I change the code?
In any case, appreciate if anyone with experience with getting initial acceptance for Google Auto Ads can assist. If you provide code appreciate if you could use functional components as I am not very up on class components and the use of componentDidMount as most of the examples seem to be using.
Link to my site: https://tlgamer.herokuapp.com/
Adsense will look for Adcode in herokuapp.com instead of tlgamer.herokuapp.com that is why message from Google was "We couldn’t find the code on your site.", You can not monetize a subdomain if you do not own the main domain. Switch your SSR app to a top-level domain and re-apply for Adsense.
WebStorm with create-react-app has, in the /public/index.html file, a folder path to /public tagged as %PUBLIC_URL%.
It can't find the directory %PUBLIC_URL% as it doesn't exist, nor should this exist.
Other than suppressing the error with <!--suppress HtmlUnknownTarget -->, is there a way in Webstorm to alias a directory variable like, %PUBLIC_URL%, to the root path of /public for no editor errors in development?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
This article seems to give some more insght on this:
https://medium.com/#jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b
This is a good time to address that funky looking %PULIC_URL% tag. Remember the ‘escape hatch’ React provides in case we put assets in the public folder? During the build, assets prefixed with the %PULIC_URL% tag will be recognized and complied. However this is NOT best practice and should be used only when necessary.
Thus, in most cases, you can replace %PUBLIC_URL% with something like public, but of course, it depends on how you have structured your React project.
I have a index.html page where I download some common js/css. On one page page, when navigated through ui-router , I want to download page specyfic scripts, for instance libraries that are required for this page. This markup is included in XHR HTML returned when I navigate to a view:
<link href="/css/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script type="text/javascript" src="/js/fade.js"></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
CSS gets downloaded but I see no JavaScript request on the network tab. How can I fix it / what is the proper way to handling this situation?
Here's the original page that I coded using "Adaptive Design", and has no support for mobile devices: http://opportunityfinance.net/Test/savedateIE8/index.html
Looks great in IE 8 as it should via the pic below:
Here's a page that I optimized for mobile devices, basically it is EXACTLY the same as the first page, except it adds in <meta> tags and such for mobile devices. Looks good in all browsers that I test, except IE 7 (which I could care less about), and IE 8 (WHICH I REALLY CARE ABOUT) A lot of people visit the site using IE 8, so it needs to support IE 8!: http://opportunityfinance.net/conference-2013/index.html
Pic of what it looks like in IE 8 below:
Why is this looking completely different in IE 8 than the first pic? I can't understand it. AFAIK, it should be loading up the index.css file and applying it exactly like the first page. What is the problem here?
Could it possibly be related to this bit of code:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
But if I remove that code than it looks all jacked up in IE 9 also!
EDIT: Please do not edit my code changing IE 8 to IE 9. I understand that this problem is being tested in IE 9, but it is using IE 8 Document Mode in Developer Tools, so it is the same as IE 8!
Ok, here's how I solved this problem. Apparently any version of IE before IE 9 does not attach the stylesheet when using media queries inside of the link tags media attribute. Also, IE 8- had some odd behavior when presented with this line: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> And as it turns out, I don't even need this line: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> which was causing problems since the Google Chrome Frame wasn't available, and edge wasn't either. So, I just removed that line, and all is fine now.
Here's the dirty hack I had to do in order to get this working for mobile devices and IE 7 and 8, for anyone interested:
<!--[if gte IE 9]>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<![endif]-->
<!--[if !IE]><!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" href="css/narrow.css" media="only screen and (max-device-width: 600px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<!--<![endif]-->
I wish there was an else statement in these conditionals, but whatever. This works now and loads up the index.css file and thank god, cause I was pulling out my hair on this one! The narrow.css file doesn't need any conditionals, since IE 7 and 8 ignore the stylesheet anyways cause it uses media queries.
I am new in JQuery Mobile. I really like it but I have 2 basic questions:
1- Can I test the app OFFLINE in my iPhone?
I know how to see the app when I am with an Internet connection even how to create the icon. But I don't see how to see the app i I don't have an Internet connection.
2- I suppose I can sent the html and css made with jQuery Mobile to Apple as any app. And it will work offline. Is that right?
Is there anyone with experience who have done apps with JQuery Mobile and are working in the app store?
Yes, you can have a jQuery Mobile page completely offline. Download the necessary libraries to your device. For the example I used the following
jquery-1.8.0.min.js
jquery.mobile-1.2.0.min.js
Additionally you need the jQuery Mobile CSS structure file
jquery.mobile.structure-1.2.0.min.css
Then use the theme roller to create your own CSS (or without changes just use the default jQuery CSS) and download it including the icon sets to your device. For the example I used this CSS name
taifun.min.css
The icon sets are stored in the subdirectory /images.
example code
<!DOCTYPE html>
<html>
<head>
<title>Offline</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="taifun.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<h1>I'm a jQuery Mobile offline page</h1>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
</ul>
</div><!--/content -->
</body>
</html>
screenshot HTC Desire
#Brice Favre is right - testing 'offline' could be achieved by hosting your app on a LAN and accessing it using your iPhone through Wifi.
If you 'host' the app using e.g. PhoneGap, and include all the libaries (jQuery, jQuery Mobile) and CSS as part of your application, then your app will function just fine without an Internet connection - many apps work this way. See this PhoneGap tutorial.