Why is my published website deformed when my unpublished version of the same website perfect? - html

so I have created a webpage using html and css called https://www.printt.us. When I run the code before I publish it, it looks fine. However, when I publish it, it is completely deformed. This is not a local issue because it affects a lot of other people that have viewed my webpage too. Does anyone know a fix for this?

Related

Why Is My HTML and CSS Code Not Running Properly On The Internet?

I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.

When uploading HTML files to web hosting pad, why won't my images show up?

I have a website with all coding and appropriate html and file paths for my images. When I run the code through my own testing process, everything works. However, when I upload my html files and picture folders to the hosting site Web Hosting Pad, none of my images show up, instead a black "x" appears. Everything is uploaded and on the site. This is what the website looks like when hosted through Web Hosting Pad (Web Hosting Pad version) VERSUS what it looks like through my own test (My Testing Version). I honestly have no idea what or why this is happening, if its a coding problem or something I'm missing in how I'm hosting the site. Please help if you have any knowledge or idea of what I should do! This is what my code looks like for my images. Code
Did you save your images as jpg or jpeg?
You image tag is wrong, it's necessary to close it with "/>"

Caching? div concerning images don't work on pc's that opened site first 3 hours after upload

Hi I'm kinda stuck on idea's to try to solve my problem since I don't have much experience concerning caches.
I'm currently working on this site of a business partner of me.
I got his host, username and password so I'm litterary working as him using Filezilla.
I downloaded the entire site content from filezilla into a desktopfolder.
I made a copy of it to work in and from there I made some changes in the .html and .css files.
In offline mode, everythings works perfectly as I want it.
Then I deleted the the sitecontent in Filezilla and replaced it with my changes.
Now the weird parts happen.
When I open the site online without www. prefix it works great
when I open the site online with www. prefix I can't see the images that are
placed within div's that purely concern the image
When a pc opened the site in the first 3 houres it was online, the div's don't
work
Also later on that specific pc can't make the div's to work
Pc's that opened the site only after these 3 houres have no problem at all
I've tried replacing the stylesheet and wait a couple hours, but caches seem to be made. and the result stays the same.
However this is no problem for the avarage customer since for them the site works, you can see what a hell this may be for me as developer and the owner, who offcourse opened the site right after I put it online.
Any suggestions might be usefull.
In most of the browsers you can use F12 shortcut to see the developer tools. In Network tab you can see all files that are currently being loaded. You can see there if the file is being loaded from the server or from the local machine.
By pressing CTRL+F5 (in Chrome and think in Firefox too) you are forcing cache to refresh.
If the PC is still loading in a cached version of the site, you can refresh the page and delete the cache by holding Control + F5.
Seems like I found the source of the problem.
I was using the css from a bought template which has some coding that malfunctions when ftp-uploading using ASCII
Uploading Binary solves the problem
The reason the did work on some computers was that they had the old css still cached. which was earlyer uploaded in binary instead of the same css files i uploaded in ASCII.

Images published from GitHub Pages not displaying correctly

I am publishing some simple webpages (HTML, CSS, some JS) from my GitHub repository. When I display index.html in Chrome (55.0.2883.95, 64 bit) by clicking on the URL linked in this repository, the webpage is displayed, but as soon as I scroll down, the featured image disappears when it shouldn't.
The other working link is "Fees" at the top. Click on that, scroll up and down the page, and the featured image will similarly disappear.
I want to point out that I first published this repository/page in Nov. 2016 and the images all displayed fine. Recently I changed the domain name associated with the repo but normally wouldn't expect this to create issues. Also, when I simply zip and download the repo and open in Chrome locally, everything displays perfectly.
Lastly, this site works with CSS Grid so I have the appropriate flag enabled in Chrome. It's hard for me to understand why images suddenly don't display correctly using GitHub Pages!
EDIT Sorry if this question seems vague. Let me restate. Everything seems to initially load and display correctly in my browser. The issue seems to be triggered by merely scrolling down the page.
This code used to display correctly on GitHub Pages. I come back two months later and the same code doesn't work anymore. Image pathnames are all correct. It's evidently not a JS issue. Download the same code and it displays perfectly on localhost.
After reading this thread I realized that one of my extensions was causing the page to disappear on scrolling. Specifically, I disabled the Window Resizer extension and the problem was solved.

Chrome Developer Tools not showing CSS sheet or line for locally hosted Zurb Foundation pages

This is kind of a long shot, but I'm at my wit's end. At some point in developing a locally hosted Foundation page, the Chrome Developer tools stopped displaying the stylesheet and line for each individual CSS rule when inspected, but instead just seems to show the media query for the element. I've noticed that other pages I've built with Foundation, locally hosted are doing the same thing. It only seems to be locally hosted Foundation pages that are giving me this problem. Locally hosted Bootstrap pages work as expected, as well as Foundation pages that are actually hosted. I have no idea what is going on here, or why the Developer Tools would just stop working in the middle of a build. I've checked all my settings, went as far as downloading Chrome Canary and am seeing the same results. I'm not running any kind of local server like MAMP, and this have never been an issue in the past.
Any help?
If you are using prefixfree.min.js just remove or comment it out and everything should go back to normal.
I'm pretty sure the answer was in my file folder structure. The parent folder contained a blank " "space, replaced with a - everything seems to work.