I'm about ready to rip my hair out trying to make respond.js work.
We use it on all of our mobile sites, and usually there are no issues at all, but I've recently needed to make it possible to get mobile compatability going on one of our very, very old systems.
I've tried everything I could - I've stripped out all of the extra code from the page, tried an alternative to respond, tried putting the script inline, I've even made a localhost copy. I know it's going to be something stupid but I just can't see it right now.
The entire code, after stripping it all back, is included below - works fine in Chrome, as always. I know respond.js isn't even being applied, because if I put the mobile styles in a media query they don't load either.
I've tried all this on the server too, to make sure it's not a local issue.
Can someone point out the silly mistake please!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="property-results">
<head>
<title>Search Results</title>
<link href="http://www.skitts.net/css/results.css" rel="stylesheet" type="text/css" />
<script src="http://searchtest.issl.co.uk/js/respond.js"></script>
</head>
<body>
<div class="property clearing">
<div class="property-info">
<span class="address">CROWN STREET, WOLVERHAMPTON.</span>
<span class="price">
<span class="pre-price"></span>
<span class="price-amount">£10,500 Annually</span>
<span class="post-price"></span>
</span>
</div>
<a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="image" target="_blank" >
<img src="http://img.issl.co.uk/2047/008/thumbs/GRB-11MH0ZQA_3559464935.jpg" alt="Address" />
<div class="status let">Let</div>
</a>
<p class="description">SEPARATE STORAGE YARD To the north of the units is an adjacent fully enclosed storage yard with separate vehicular access extending to some 1,961 sq.yds. (0.4 a...</p>
<ul>
<li>0 Bed</li>
<li>0 Bath</li>
<li>0 Reception</li>
</ul>
View full details and photography
<div class="ref-more">
<span class="ref">REF: GRB-11MH0ZQA</span>
See more
</div>
</div>
</body>
</html>
Told you it would be something stupid. For obvious reasons, respond.js can't do anything with a stylesheet on another domain.
D'oh.
Here's the compiled fiddle for your project.
It works on every browser for me"
Fiddle
Have you tried adding a meta viewport to your head tag?
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
Related
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I am Trying to add a favicon into my website. I created the icon on https://www.favicon-generator.org/ and pasted in the given code. I'm sure the file directory is right as I've checked multiple times. Could someone help me out, what styling to I need to add or remove or am I missing something?
<DOCTYPE html>
<html lang="en">
<title>Drafted</title>
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bg">
<video id="video-bg" preload="auto" autoplay="true" loop="loop">
<source src="video.mp4" type="video/mp4">
Video Not Supported :(
</video>
</div>
<div class="form">
<a href="#" target="_blank">
SUBMIT A BACKGROUND VIDEO!
</a>
</div>
<div class="text">
<a href="#" target="_blank">
drafted
</a>
</div>
<div class="steam">
<a href="#" target="_blank">
STEAM
</a>
</div>
<div class="esea">
<a href="#" target="_blank">
ESEA
</a>
</div>
<div class="twitter">
<a href="#" target="_blank">
TWITTER
</a>
</div>
</body>
</html>
Favicons have a tendency to cache super-aggressively.
Your code doesn't appear to be off, but I would suggest the following troubleshooting steps:
Try accessing the same page in a different browser. Make sure that going to /favicon.ico directly in the browser actually works, and gives you the icon you expect.
Load the page in a different browser (or a different computer) - one that has preferably never seen this page before.
I'm not sure it's related to this, but there a couple of issues with other parts of the code that could possibly be causing this side-effect;
You've missed a ! in your doctype - it should be <!DOCTYPE html>
Your title should be inside your head section.
I suggest also running your html through a linter, as badly formed html can have really strange side effects sometimes.
Your favicon is referenced correctly in your HTML, and should display. As such, there are only a few possible causes of your problem. Check whether you can navigate to www.yourwebsite.com/favicon.ico manually.
If so, there's a caching issue:
Try clearing your HTML cache. This can be done by pressing CTRL + F5.
Try clearing your CSS cache. This can be done by holding SHIFT while clicking on the refresh icon of your browser.
Try a hard refresh. This is done by holding CTRL and SHIFT and then pressing R.
If not, the problem is that the file isn't found:
You may not have got your favicon stored at the root of your project. Ensure that the file is actually at root level.
You may not have uploaded your favicon to the server. Check whether the file exists on the server itself.
If the file exists on the server, ensure that it is a valid .ico image.
You also have invalid markup, which may be the cause of your issue:
Your <DOCTYPE> tag needs an exclamation mark before html.
Your <title> tag should be inside <head>.
I would recommend running your HTML through a markup validation service, such as The W3C Markup Validation Service, to ensure that you have valid HTML.
Confirming all of that and fixing up those two errors should almost certainly fix your favicon not coming through.
Hope this helps!
I am using arrow up glyph-icon using Bootstrap. when i applied downloaded css in HTML it is not working, but if used full HTTP css path in online it works.below is my code, tell me where is wrong in my code,is it browser version is dependent? if I used https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css. this complete path it works.but I need to add offline.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<body>
<div class="w3-container">
<button class="w3-button w3-xlarge w3-circle w3-red w3-card-4"> <span class="glyphicon"></span></button>
</div>
</body>
</html>
Replace this
<span class="glyphicon"></span>
with
<span class="glyphicon glyphicon-arrow-up"></span>
More information :
https://getbootstrap.com/docs/3.3/components/
Got it! Well, at least if you use the µBlock plug-in in your browser.
For me it worked when checking the "Ignore generic cosmetic filter"-option (or whatever it is called in English) on the "Prepared Filters"-page (or whatever it is called in English).
I tried to figure out where the source of this feature is located to see how that cosmetic filter works, but couldn't find it. I mean there might be a way to work around that cosmetic filter if the element with the glyphicon would be coded differently.
Before you mark this as a dup, please read it all:
So I've been searching times a billion on here, and every other site, and can't find a solution that works.
I'm using .NET, and trying to use Bootstrap's Glyphicons.
A lot of them work perfectly fine, but NOT ALL of them are showing up.
I've literally tried every solution on here, and nothing works.
Including hosting the files myself, and loading them from the CDN.
Here's an example of one that won't load.
<span class="glyphicon glyphicon-queen"></span>
It looks like many people have had similar issues, but am I alone on this one?
Thanks, iBenji
try this, it works:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<span class="glyphicon glyphicon-queen"></span>
</body>
</html>
here is jsfiddle example:
https://jsfiddle.net/h885aeh0/
How can I edit and reflect the changes that I have made in the HTML on Chrome dev tools (press f12 on chrome)?
In source tab we can edit the page but when I click on the save button it does not reflect the changes on the original file.
Is there any way to save these changes?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Ribbon</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="menu">
<ul>
<li class="l1">
CSS3
</li>
<li class="l2">
is really
</li>
<li class="l3">
powerful
</li>
</ul>
</div>
<div class="bubble">
<div class="rectangle">
<h2>3D CSS.................................................................... ...................klklklklk Ribbon</h2>
</div>
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />
It doesn't work with IE!</p>
<p>Go to the tutorial!</p>
</div>
</div>
</div>
</body>
</html>
The answer is No, You can not save files back on webserver.. It just saves files locally.
Some Points:-
You can do some local modifications like Changing some Styles of some elements, Updating some JavaScript in source tab, Updating some HTML in Elements tab. But these changes will get lost once you reload the page.
If you own the site, you can always copy the final files from dev tools and update your files on web server.
You can always think of the reason why browsers can't do it for you. I shouldn't say it would be a security flaw. Infact it would be security less. This just mean you can update any site which does not belong to you.
I hope you get it.
It seems that the above message is outdated and actually wrong. Source code editing in Google Chrome is possible and recommended.
http://www.hongkiat.com/blog/google-chrome-workspace/
It's been a while since this is possible. This is from 2013:
http://www.sitepoint.com/edit-source-files-in-chrome/
It cant be changed. You change it temporary, but when you reload it , it is loading from server, with its code, not code you entered. If you find a way to crash a server, then you can save your changes on their files :D