Responsiveness for mobile not working - html

It was once not responsive so had to reconfigure to do figure it.
What could be the issue?
<!DOCTYPE html>
<html lang="en" class="testTheme">
<head>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="img\logo.ico">
<title>Testing Website</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
</body>
</html>

Based on the above comments, your issue is how you're redirecting your custom domain to your heroku deploy. See heroku's docs for a setup that will work for you!

Related

The Emmet in VSCode does not give the full code in the boilerplate

I am new to VSCode. I tried using the Emmet to get a HTML5 boilerplate. When I type ! for Emmet, it does not give the full boilerplate. I got this boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body></body>
</html>
but I expected this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Document</title>
</head>
<body></body>
</html>
The <meta https-equiv /> line is missing.
I am on Windows 7.
Don't use any other extensions for HTML and CSS auto complete.
If you have already installed please remove it.
I had the same problem and all I do is update the newest VScode version and it fixed. Now the code looks like this.
<!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">
<title>Document</title>
</head>
<body>
</body>
</html>

How should I make this website responsive?

So, I've been trying to make the header responsive as it should but it does not seem to work at all.
Any help would be nice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>This is just a test page that does not work on three tested devices any help would be nice.</h2>
</body>
</html>
Enusure to add this <meta name="viewport" content="width=device-width, initial-scale=1">
You can use bootstrap head and it will do it for you.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
Bootstrap is amazing for creating websites: https://www.w3schools.com/bootstrap/default.asp

Utility to include css and js

I have a repository of some web files I'm building. There are a few stylesheets that I maintain separately so they're included with <link> tags. To deploy the HTML I need to replace the <link> tags with <style> tags containing the content of the file. Sort of like using #include <style.css>
Is there a good Linux utility that I can use in a Makefile? Do any of the HTML preprocessors do this sort of thing? (This is different from CSS inlining.)
To be more specific:
I'm writing a custom brew sheet for BeerSmith - which is just an HTML page.
I'm using a couple of stylesheets for a grid layout, print layout, cleanup some unwanted auto-generated HTML, etc.
I would rather maintain each sheet separately instead of stuffing it all into one page.
BeerSmith does not include the separate CSS when exporting recipes, so I need to build in in to the final brew sheet.
I have a deploy script to copy the sheets into my .beersmith3 directory which I'd like to use to assemble the sheet.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
etc ....
this is very specific to your case
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' <filename>
here is sample output
Note I have added two line to handle <link> and </link> cases
cat x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
<link>
</link>
output is
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style rel="stylesheet" href="base.css" />
<style rel="stylesheet" href="grid.css" />
<style rel="stylesheet" href="beersmith-cleanup.css" />
<style>
</style>
I should have known there was a perl utility.... The Template Toolkit solves this problem handily.
HTML
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
[% INCLUDE base.css %]
[% INCLUDE grid.css %]
[% INCLUDE beersmith_cleanup.css %]
</style>
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith_cleanup.css" />
</head>
Command line
0 fatty:0.0 .beersmith3/Reports % tpage test.html > llama.html
Output
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
#media screen {
html {
font-size: 1em;
}
}
....

PhpStorm HTML5 snippet

This is actually not a question. I just need the default snippet from PhpStorm when you create a new empty .php file and just write
! + Tab
It will spit out the HTML5 basic template. Something like:
<!DOCTYPE html>
<html>
<head>
.....
So the answer to this "question" would be simply that code.
If someone who has a PhpStorm could just paste that code here it would be nice.
I finally got it from my friend:
This is the result of the snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
And this is the example for creating it in Sublime Text 3:
<snippet>
<content>
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>$1</title>
</head>
<body>
$2
</body>
</html>
]]></content>
<tabTrigger>!</tabTrigger>
</snippet>
Just copy that code under Tools/Developer/New Snippet

imported svg as img is not working

Stumbled upon the following svg:
https://codepen.io/iliran11/pen/eRPxwG
While im copying the content of the pen into a file liran.svg there are the 2 following scenarios:
opening directly liran.svg with latest chrome - it works perfectly
Importing liran.svg to index.html (code below) - i can see nothing.
Maybe any exaplnation?
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="./liran.svg">
</body>
</html>
You did not import properly if it is the same folder with the index.html file use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="liran.svg">
</body>
</html>
If it is the parent folder of the folder containing index.html use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="../liran.svg">
</body>
</html>
Take a look a this link to learn more on referencing files in html and css How to properly reference local resources in html