I'm having trouble figuring out why the site I'm making is rendering so small on the mobile. In order to figure out why, I've managed to replicate the problem with this very short html:
<html>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>
You can see the live version of that HTML here. This is how that example is rendered on my iPhone. This is how the same phrase ("No look behind the back catch") is rendered with the same font-size, except in a different site, Reddit. Why is my HTML rendered so small on mobile phones?
You need to add a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This goes in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>
Related
lately I've been having a problem, where I try to open my html file in any browser but it doesn't display and it's stuck in a state of loading, i've tried opening another html file and putting the same code but it doesn't display. I suspect it's a problem with the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="learn.css" />
<script src="learn.js"></script>
<link rel="icon" href="data:image/png;base64,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">
<title>Jordan Jana</title>
</head>
<body id="b0dy">
<nav class="crumble">
<ol class="crumb">
<button class="butt" style="color: #64ffda;">
<a style="text-decoration: none" href="me.html">About me</a>
</button>
</ol>
</nav class="nav">
<p id="potsu">
Hi, I'm
</p>
<br>
<div id="para"><p>Jordan</p>
</div>
<div id="surname"><p>Jana</p></div>
<div id="me"><p>I love making stuff(online not in real life)<br>
I'm currently learning Web Development and a bit of bash on the side.<br>
I also have a Github,Twitter,
and discord(senpai-kun#3773) where I'm most active and you're more likely to reach me</p></div>
<div id="and"><p>And</p></div>
</body>
</html>
I've tried changing browsers and changing some of the code but the problem persists
I Checked your code in multiple browsers it is working fine, Try to refresh the webpage by CTRL+F5. if issue still persists then there is an issue with your javascript.
and also don't use classes on endings of tags like you did with
</nav class="nav">
Okay so I'm 100% new to programming. The question format may also be wrong.
The Question: theme on html?
Still beginner on html. wanted it to look aesthetically pleasing to my eyes at least with what I've learnt. No CSS knowledge yet. I've been little bit searching whatever i feel like putting on my page(emojis).
I've searched Google and did what was written but it still doesn't display the theme.
Okay so here's the code so you can see, will add more things later as i learn(I know it's nothing for you all):
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f7cac9">
<title>Galaxia
</title>
</head>
<body>
<h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
Welcome to my weird abode 🦋
</h3>
<br>
<br>
<!-- added two br tags because otherwise heading and paragraph overlap -->
<div class="coder">
<p>This is a html example from me for now,
<br>
have fun.:) </p>
</div>
</body>
</html>
Thank you in advance!
In order to add styles to your HTML page, you use css (with the file extension .css -- for example styles.css). To make the styles visible on your html page, in the head section you would include <link rel="stylesheet" href="styles.css"/>. For instance, in the css file, you could include:
h3 {
color: #f7cac9;
}
Then, after adding the link rel, the h3 elements in your html page would be pink. Hope this helps! Alternatively, you could add tags in your html page.
Here's an example of adding css to an html page. By adding .coder {background: green}, the background-color turns green:
.coder {
background-color: green;
}
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f7cac9">
<title>Galaxia
</title>
</head>
<body>
<h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
Welcome to my weird abode 🦋
</h3>
<br>
<br>
<!-- added two br tags because otherwise heading and paragraph overlap -->
<div class="coder">
<p>This is a html example from me for now,
<br>
have fun.:) </p>
</div>
</body>
</html>
Like the other guys posts.
HTML - is a markup language. You will say for the browser: Hey this is a paragraph ... <p>This is a paragraph</p>
CSS - You will make things looks nicer. You can change all the colors, backgrounds, fonts, sizes, margins...
One place to find a quick tutorial and it is also a good place to know is w3schools.com.
It is famous and a lot of people use it.
I hope that you keep pushing.
The first step is the hardest one!
So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. So the HTML of the page looks like this:
https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
Portfolio
Sobre
Loja
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. The size is important, and the current size is the one I want. Also, notice that there is a text overlaying the image. That text must stay there. I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image.
I tried my luck with some CSS but it din't go very far. You guys can take a look:
https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all:
https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning.
You can use wowslider. Wowslider . Just download the software. You can easily add any picture and also any kind of sliding transformation.
I am moving a navigable site into an iframe that now has other frames surrounding it.
Everything works normally however now in Safari when a link is clicked in the main iframe the iframe goes blank momentarily then the pages loads. Usually the user would only notice changes in elements that have changed. So the main site template would appear to have not been reloaded.
This is how the site used to behave outside the iframe and in Firefox it behaves that way despite now being in an iframe.
Is there any way to stop Safari re-loading the entire page from scratch each time a link is clicked in the iframe?
The answer has been tested and is completely serious, be warned!
So the Safari white flicker only occurs when a Javascript file is called in the head or the body, and from the same domain.
So you can include Javascript files in the head as normal from an external domain and no flicker, change it to your own domain and it flickers.
To get even more weird if you include the local javascript files in the body there is a lesser flicker, after the body it completely goes away.
This must be a bug!
Below is a basic example, clicking the link causes the flicker.
Test page HTML:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="inzu.ico" >
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<iframe id="iframe" src="testframe.html" style="height:600px"/>
</body>
</html>
Frame with flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="/something.js" type="text/javascript"></script>
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
</html>
Frame with no flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
<script src="/something.js" type="text/javascript"></script>
</html>
I have coded a html page as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body bgcolor="#f2f2f2">
<div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
<div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
Hello world
</div> <!-- end container 2 -->
</div> <!-- end main container -->
</body>
</html>
The width of the div is 1000px and it is center aligned using the property margin:0px auto;
When I view this in the desktop browser, it is fine. But in a mobile browser(iPhone Safari), I get an unwanted horizontal scroll, also the entire page floats hrizontally and diagonally.
Why does this happen?
How can I fix this issue which is specific to iPhone/iPad browser. I have not tested in other mobiles.
What are the code I need to put in to make a mobile browser display a webpage(designed for desktop browser) properly?
Please suggest.
Thanks
Thank you for the suggestions provided.
A slight modification solved the issue.
<meta name="viewport" content="width=1000" />
This worked.
Try to add this line to head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=1000, initial-scale=1" />
Try the above, instead. The content width is set to match that of the container div, and the max scale is removed to allow users to zoom in.