I have a page that I'm making, and when I export it, the text goes from being formatted to unformated. I just have the div, with the class, and the text. So, why is it doing it and how can I fix it?
mmhh... this could be the problem, when you load the page on mobile internet, not over wlan)
you have to set some params for mobile... you can check, if this works for you
this solved my problem:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
Related
I am using semantic ui, and the html works fine on my pc. When I upload it and run my site from the internet, it looks like the normal html is working, but sematic specific functionality is missing. Is it not getting the semantic .css or something? I'm a bit new to this, so if you could help me debug I would be be grateful.
I am using Semantic version 1.8.1.
My html is located relative to all the source files in the same way as the examples which come with the release in the /examples directory. So I access the file relatively such as "../dist/semantic.css"
Here is the head section of the default.htm main html page.
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Spin Boogie</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="kitchensink.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<!-- Used with Tab History !-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js"></script>
<script src="../dist/semantic.js"></script>
</head>
I'm working on a website right now, it's tiniglesias.com ... and everytime I try to use my iphone to check it, it is automatically zooming in.
I've already deactivated all of my plugins to check if any of it is causing this to happen, but it is still zooming in.
I've also tried using the meta tag
<meta name="viewport" content="width=device-width" />
Still not working.
Help would be greatly appreciated.
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Update:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
I don't know why I get this error when I validate my site, but clearly I am doing something wrong because I get the following error too:
"An body element start tag seen but an element of the same type was already open"
<!DOCTYPE html>
<html lang="en-uk">
<head>
<title> Erasmus+</title>
<meta name="author" content="" />
<meta name="dcterms.rights" content="" />
<meta name="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="" type="text/css" />
<link href="" type="text/css" />
<link rel="stylesheet" type="text/css" href="" />
<link rel="shortcut icon" type="image/x-icon" href="" />
<?php wp_head();?>
<!--[if !IE]><!-->
<style>
</style>
<!--<![endif]-->
<script>
</script>
</head>
<body class="home blog">
It is a wordpress website: www.erasmus-plus.ro
I can't find what I am doing wrong.
Thanks!
Edit: I see that if I remove
<?php wp_head();?>
the error is gone, but isn't it needed for wordpress files?
That's not the complete HTML code. Looking at the source, apparently you have:
<input type='hidden' value='http://erasmus-plus.ro/wp-content/plugins/form-maker' id='form_plugins_url' />
In line 41. That's "displayable" code, so I think it's making that the head part closes and opening the <body> implicitly, and hence complaining when it gets to your explicit tag.
I guess that some stray plugin is misbehaving using wp_head to insert that into your . Try disabling your plugins one by one and you'll probably find the culprit. Probably something related to forms?
I have three stylesheets: a persistent one, one for windows 800px or greater ("standard"), and one for windows smaller than 800px ("mobile"). My problem is that the standard style sheet is being recognized and applied, but when I resize the window to under 800px, the mobile sheet is ignored and I'm left with only the persistent style. I suspect it's a basic syntax error, but I haven't been able to find the problem.
<link rel="stylesheet" type="text/css" href="persistentstyle.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" title="standard" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:799px)" title="mobile" href="mobilestyle.css">
I already have the necessary meta tag in the header:
<meta name="viewport" content="width=device-width" />
Thanks!
May be you need this:-
<meta name="viewport" content="width=device-width">
Generally, the most common mistake is not including the meta tag required for CSS media queries to work:
<meta name="viewport" content="width=device-width">
This link explains the viewport meta tag, and additional properties you can assign to it, such as allowing the screen to be scaled, and more.