CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3jekyll
tx291
tx291

Reputation: 1331

CSS not always rendering properly in Jekyll/Bootstrap site

I'm building a site with Jekyll 3.0.1 and Bootstrap 3. I've noticed that pretty often, when I make changes and refresh my page, the CSS on certain things will randomly break. For example: 1) I'll have overridden Bootstrap's coloring of a link with my own style (NOT editing the Bootstrap file). 2) I'll change a UL on the same page to be display:inline-block, and my custom link color from #1 go away.

Obviously these two items are completely unrelated, I've checked and rechecked my HTML to make sure nothing is nested incorrectly. The same kinds of things are happening elsewhere, too (ie changing the border color of something suddenly makes a certain div not render). The only thing I could guess is that the CSS isn't getting imported properly or in its entirety, but I don't know.

I'm currently working in Firefox, if that's helpful at all.

To say the least, this is incredibly frustrating and I've never encountered anything like this before. Has anyone ever encountered anything like this and have any suggestions??!

Upvotes: 1

Views: 141

Answers (1)

Siebe.V
Siebe.V

Reputation: 136

Looks to me you are facing a caching problem. Sometimes If a certain file is cached it loads up the default css for some weird reason. I'm facing this when i develop sites. I'm not sure if this is a solve for you but adding a parameter to your css link will prevent your css from caching.

<link rel="stylesheet" type="text/css" href="http://example.com/style.css?r=1">

by adding ?r=1 you will prevent caching. You can also try to use chrome and disable the caching itself and see if the problem still persists.

Open the developer tools (F12, or Ctrl-Shift-J) bottom right -> Gear check disable cache.

Althought maybe that paramater will fix your problem you shouldn't really use it cause people will have to reload your css everytime they visit your webpage.

Upvotes: 1

Related Questions