HTML file name changes the styles - html

I have never seen this before and it makes absolutely no sense, so I figured I would ask on here if anyone has ever come across the same type of thing. I'm building a website using HTML5, CSS3, JavaScript, and the Bootstrap framework. Every page is the same as far as the navbar and jumbotron at the top of each page. I was having a weird issue where the home page, index.html, showed larger text in the navbar and a larger sized jumbotron image than all of the other pages. It made no sense since the code and styles were the same for every page. I copied all of the code from index.html and pasted it into test.html. The only change was the file name, yet when I viewed test.html in the browser, it looked different from index.html. I'm at a loss here, even when I deleted index.html and renamed test.html to index.html, the same issue happens to the new index.html. I have simply renamed index.html to home.html to fix the problem, but has anyone else ever encountered an issue like this?

Related

Pages on github not styled and links do not work

It's the first time I try to upload my website on github.
I have a problem because my page is not not styled and the links do not work.
I see that the problem comes from the name that I have given to the main folder on github. But I don't find any other way than to change the pathway of all my pages including css.
Is there a simpler way?
Thanks you

How to fix layout issue with Columns and Image Alignments?

Recently blog columns and images are not aligning correctly on my websites blog. The rest of my site is not effectuated by the issue. The layout looks correct in the blog preview but when you go to the live post the layout is completely broken.
Source URL :
https://methodprinting.com/blog/2019/04/22/from-design-to-print/
I have tried to disable all plugins and that did not help. I've removed the minified CSS and HTML but no luck there. I also tried to switch from child theme to primary theme and it was still broken.

Why does "iframe.hidden{display:none}" appear under the navbar when the site is viewed on a mobile device?

I'm making a site with Tumblr. The code iframe.hidden{display:none} shows on the top left when I look at the site from my phone. I can't find iframe.hidden{display:none} anywhere in my code. Is it because of how Tumblr renders code or possibly on their end?
Below is an image of what I'm talking about.
(https://i.stack.imgur.com/HX9ek.png)
So I went ahead and pulled up your website in a mobile device simulator over at http://testobject.com/ which you can do as well for free. I then opened up the dev tools for the browser and saw directly under the body tag for you webpage is the following line
figure{margin:0}.tmblr-iframe{position:absolute}.tmblr-iframe.hide{display:none}
I am not a big tumblr user, almost don't use it at all but my guess based on looking in the head section is wherever you paste in custom css this line of css is not typed correctly, which is causing it not to be picked up as css and instead displayed as plain text. I would start by looking there, hope this helps.
I see that your web page is not coded correctly. When I opened, https://raffalaw.tumblr.com/.
See below just under body tag :
You have put different <link>, styling in <body> tag. It's not recommended to put styling and <link> tags in <body> tags. See : What's the difference if I put css file inside <head> or <body>?.
Obviously, its breaking somewhere in your actual code. I would appreciate if you can show snippets of your actual code.
The answer was that there was a meta tag in the head not closed. I added the bracket at the end and the mysterious code disappeared.
https://trentonerker.tumblr.com/post/155377765774/how-to-fix

How to edit Materialize CSS style sheets?

Hi Stackoverflow friends! I've been playing around with Materialize CSS framework and as instructed, downloaded, extracted files and set-up directory structure as per the set-up page. Being all set up, I've now begun to copy certain snippets of HTML from the 'components' section of the Materialize site, which work fine until the point I want to change anything. For example, I thought lets change the colour of the nav bar from the classic Materialize maroon to blue, although I noticed the relative link points to the minified CSS file (which I obviously can't read) - I changed that link to 'materialize.css' (long form CSS), but noticed when I refreshed the page, no styling at all was there? Any tips as to how I can manipulate styling without writing new CSS? If I have completely gone about the wrong way, please let me know also? Many thanks, Nick.

Css not loading on mobile browsers

I had a website hacked a while back and I've been cleaning out the server, changing / updating things, changing passwords etc and one of the things i cant figure out is, why when this website (http://prestigesolar.net/) is viewed on a mobile, the site loads but no style or images come through.
I've checked the header areas of the site for possible mobile stylesheets, .htaccess files, css files themselves for possible #meta screen code or #import etc....hoping id find maybe a bad/hacked path or...or anything to give me a clue, but overall I've mostly found nothing or corrected/removed weird paths etc.
After all this, the site started behaving semi normal but then when viewing the site on a mobile, i would get redirected to a porn site. I kept looking and found other .htaccess files
that when i put onto my system to edit gave me massive trojan warnings etc. I've since removed them all and placed a normal lean one.
Now the site itself is fixed (at least for now) but, when viewing the site on a mobile, it now displays only text.
As far as the website is concerned, its a wordpress based website, standard win server. normal plugins etc and is based on the WP 2010 default theme.
Any ideas as to other things i can look at to correct this issue?
Thanks in advanced.
In the <head> section when you call CSS try instead media="all" to put media="screen".