Rewrote this submit to incorporate extra info. Please let me know if that is the right method to format it!
I take advantage of Google Chrome as my default browser and each time I verify my code on the Reside Server recently, an additional field seems on the backside of my work. When the html is exported, it seems high-quality and when I attempt to load the code on one other browser, it additionally works completely. Is that this a chrome error? I’ve up to date the Chrome browser and nonetheless get an additional field on the backside of the dwell server.
Authentic HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta title="viewport" content material="width=device-width, initial-scale=1">
<title>Template</title>
<hyperlink rel="stylesheet" href="css/model.css">
</head>
<physique>
<header></header>
<part></part>
<part class="bigSection"></part>
<part></part>
<part></part>
<footer></footer>
</physique>
</html>
Authentic CSS
/* Field Mannequin */
* {
box-sizing: border-box;
}
.clearfix:after {
content material: ".";
show: block;
clear: each;
visibility: hidden;
line-height: 0;
top: 0;
}
.clear {
clear: each;
}
header, footer {
top: 100px;
border: 2px stable black;
clear: each;
}
part{
top: 300px;
width: 20%;
border: 2px stable black;
float: left;
}
.bigSection{
width: 40%;
}
This is the dwell code: HTML of Reside Supply (http://127.0.0.1:5500/template/index.html)
<html lang="en"><head>
<meta charset="utf-8">
<meta title="viewport" content material="width=device-width, initial-scale=1">
<title>Template</title>
<hyperlink rel="stylesheet" href="css/model.css">
<model kind="textual content/css">
@font-face {
font-weight: 400;
font-style: regular;
font-family: round;
src: url('chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/fonts/CircularXXWeb-E book.woff2') format('woff2');
}
@font-face {
font-weight: 700;
font-style: regular;
font-family: round;
src: url('chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/fonts/CircularXXWeb-Daring.woff2') format('woff2');
}</model></head>
<physique>
<header></header>
<part></part>
<part class="bigSection"></part>
<part></part>
<part></part>
<footer></footer>
<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.name(doc.getElementsByTagName("hyperlink"));
var head = doc.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.size; ++i) rel.size == 0
}
var protocol = window.location.protocol === "http:' ? 'ws://' : 'wss://';
var handle = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(handle);
socket.onmessage = operate (msg) {
if (msg.knowledge == 'reload') window.location.reload();
else if (msg.knowledge == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Reside reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Improve your browser. This Browser is NOT supported WebSocket for Reside-Reloading.');
}
// ]]>
</script>
<div id="loom-companion-mv3" ext-id="liecbddmkiiihnedobmlmillhodjkdmb"><part id="shadow-host-companion"></part></div></physique></html>
As I discussed above, I up to date Chrome and this downside nonetheless happens. If I take advantage of a server like Duck Duck Go or Safari, there aren’t any points and the code seems prefer it ought to. I’m pretty new to coding and utilizing a dwell server so all perception is significantly appreciated!
