CSS not working after uploading to domain
Copy link to clipboard
Copied
Hello. I am new to using Dreamweaver. I made a simple sample page and everything looks good on real time preview. I uploaded the site to my domain and the site shows up but no css is not working. What might be the problem?
I have this on my index.html file:
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<link href="CSS/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
is the URL. Thank you.
Copy link to clipboard
Copied
Also, forgot to mention i tried switching the line places of the 2 css files and still doesnt work.
Copy link to clipboard
Copied
Probably a cache probleme, try to empty your browser cache first.
https://www.pcmag.com/how-to/how-to-clear-your-cache-on-any-browser
Here, everything seams working as expected. Your class .mainh2 is center in green and your p tag is red.
Copy link to clipboard
Copied
I'm seeing your bright green h2 color and red text on the home page as defined in the very short styles.css file.
If that's all you're missing, chances are you just need to refresh your browser cache.
If there is supposed to be more to that file than...
@charset "utf-8";
.mainh2 {
text-align: center;
margin-top: 2%;
color: #00FF1D;
}
.mainh2 {
}
body p {
color: #FF0004;
}
You'll need to re-upload your styles.css and reload.
Copy link to clipboard
Copied
everything is as expected here;... at least if you didn't change anything... as @L e n a suggests did you try to empty your cache... or simply you possibly forgot to upload the new CSS file if you add some modification in DW
Copy link to clipboard
Copied
in case that you forgot to upload your new CSS file, you can still check for the auto upload feature when saving.
to set this get back where you define your website, in the server setting (the remote one), open the advanced tab, and check the second box from the top, the one to upload when save.
well, use this feature with caution, if you're working on a web site publicaly accessible, an error can happen faster that we can believe... but when mstaering this one, it is really helpfull
Copy link to clipboard
Copied
This is what I'm seeing in latest Firefox. Unfortunately, it's not responsive on smaller devices which is a missed opportunity for reaching mobile & tablet users. 😥
If you use one of the prebuilt Starter Templates in Dreamwever CC, you'll have a layout that works on ALL devices, not just desktops. Go to File > New Starter Templates > Bootstrap Templates. Choose a layout and hit CREATE button.
Copy link to clipboard
Copied
This is what I'm seeing in latest Firefox. Unfortunately, it's not responsive on smaller devices which is a missed opportunity for reaching mobile & tablet users. 😥
If you use one of the prebuilt Starter Templates in Dreamwever CC, you'll have a layout that works on ALL devices, not just desktops. Go to File > New Starter Templates > Bootstrap Templates. Choose a layout and hit CREATE button.
By Nancy OShea
excellent... I think that @Bruce25022048gzod already use Bootstrap, at least the code link to it, and the main menu is done that way...
the rest is just a big big picture inserted in a DIV... 🙂 admittedly the image is not responsive... but simply adding a class to the IMG tag and yop you get it...
<img class="img-fluid"
kind of funny.. 🙂
Copy link to clipboard
Copied
Based on the question that was asked, I didn't even look at the source code. My bad. 😞
It lacks the basic Bootstrap structure (container, row, col) that's essential for Bootstrap to work right.
<div class="container-fluid">
<div class="row">
<div class="col">
<img class="img-fluid" src="images/frontpagewide.jpg" width="1366" height="500" alt="description here">
<h2 class="mainh2">Trust our Consultancy</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
Copy link to clipboard
Copied
Based on the question that was asked, I didn't even look at the source code. My bad. 😞
By Nancy OShea
that's why I was mentionning Luky Luke... earlier... man who shoots faster than his shadow 🙂
Copy link to clipboard
Copied
Thanks all. All i did was use one of the built in inserts and use the nav bar fixed on top. It looks like all of you see the red text and green h2, but for some reason its not showing on mine. At least what i thought. I tried on chrome, firefox and even my iphone and it didnt show any changes. But i just looked at edge and can see the changes. Any reason why its working on edge and not the others?
Copy link to clipboard
Copied
I just looked at the source and saw this:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
not sure what it means but i took it out and refreshed and removed cache as suggested and it looks to work now. Thank you all.
Copy link to clipboard
Copied
It probably works on Edge because you haven't visited it with Edge before. There's nothing in the browser's memory.
You shouldn't just remove code because YOU don't understand it.
Edge compatibility is there for people who may be using outdated IE browsers. Without that string of code there's no predicting how your pages will render in their browsers.
Copy link to clipboard
Copied
In Chrome, try as previously suggested by others.

