Something weird started happening to me today - when changing the HTML/CSS of my Backbone Marionette Rails app the changes no longer seem to be propagating in my app. It seems like there's some sort of weird caching going on. Has anyone run into this before? If I rake assets:clean it doesn't seem to update the javascript changes, just the css.
Does anyone know how to force the assets to be reloaded on each GET request in development?
Thanks in advance!
EDIT:
I'd also point out that I've tried re-starting my server and restarting my computer but the changes still don't seem to propagate. Example, in my CSS folder I changed the padding from padding: 20px 10px 20px 10px; to 20px 0px 20px 0px
#free-text-answer {
border-radius: 4px;
margin: 10px 20px 20px 20px;
background: #EEE;
border: 1px dashed #DDD;
padding: 20px 0px 20px 0px;
text-align: center;
color: #666;
}
but inspecting the element it still shows padding: 20px 10px 20px 10px;
Ok I think I finally fixed it. I deleted the public/assets folder and set this in my development.rb file:
config.serve_static_assets = false
Related
I've got an issue with loading an image after hosting in GitHub.
If I run my project on localhost, the issue will not appear. It runs well. But when I run the project by going to the generated link in GitHub, I will get the error.
The project has style.min.css and stlye.css as well.
Inside the file index.html haves a link to style.min.css
My part of code:
.promo {
height: 650px;
padding: 21px 0 93px 0;
background-image: url(/../../img/background_first.jpg);
background-repeat: no-repeat;
background-position: center;
}
If you want to try running the project on your local machine, the link to GitHub (https://github.com/mrfrankyn/mrankyn.github.io).
P.S. I get it, that the problem is with the path of the image, but I tried a lot of other variants of paths.
One of the variant:
url(/img/background_first.jpg)
Thanks!
I found the problem! In this project, there was also style.min.css file and it needed to be edited.
Replace style.min.css with this:
*{font-family:MuseoSansCyrl,sans-serif}.container{max-width:950px;margin:0 auto}.promo{height:650px;padding:21px 0 93px 0;background-image:url(../img/background_first.jpg), url(img/background_first.jpg);background-repeat:no-repeat;background-position:center}.promo__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;text-align:right}.promo__header{text-transform:uppercase;color:#fff;font-weight:700;font-size:42px;line-height:42px;margin-top:90px}.promo__subheader{font-weight:500;color:#fff;font-size:24px;line-height:24px;margin-top:10px;text-transform:uppercase}.promo__icons{width:425px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:64px}.promo__icon{display:block;width:108px;text-align:center;font-weight:500;font-size:14px;line-height:14px;color:#fff}.promo__icon img{display:block;margin:0 auto;margin-bottom:15px}.promo__link{font-weight:500;font-size:16px;margin-top:7px;color:#fff}.promo__link a{color:#fff}.promo__link a:hover{color:#c70101}.header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__logo{width:250px}.header__logo img{width:100%}.header__official{font-weight:500;font-size:12px;line-height:12px;color:#fff;text-align:center}.header__official span{display:block;font-size:18px;margin-top:7px}.header__phone{display:block;font-weight:700;font-size:18px;line-height:18px;color:#fff;text-decoration:none}.header__phone:hover{color:#c70101}.header__contact{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.button{margin-top:4px;width:153px;height:32px;background-color:#c70101;border:none;border-radius:5px;font-weight:500;font-size:12px;line-height:19px;color:#fff;text-align:center;text-transform:uppercase}.button_main{width:303px;height:54px;font-size:16px;line-height:25px;margin-top:67px}.button_submit{width:100%;width:303px;height:58px;background:#c70101;font-size:16px;line-height:25px;color:#fff;text-transform:uppercase}.advantages{background-color:#f6f6f6;padding:61px 0 65px 0}.advantages__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:distribute;justify-content:space-around;margin-top:30px}.advantages__item{width:250px;text-align:center;margin:0 auto;margin-top:30px}.advantages__subheader{font-weight:700;font-size:18px;line-height:29px;margin-top:35px}.advantages__text{font-weight:300;font-size:14px;line-height:18px;margin-top:20px}.advantages__text a{color:#c70101;font-weight:700}.consultation{min-height:680px;padding:100px 0 92px 0;background-image:url(/../img/), url(/img/bg2.jpg);background-repeat:no-repeat;background-position:center}.consultation__descr{font-size:20px;line-height:30px;font-weight:500;color:#fff;text-align:left}.title{font-weight:700;font-size:30px;line-height:30px;color:#000;text-align:center;text-transform:uppercase}.title_left{text-align:left;font-size:36px;line-height:54px;color:#fff}.feed_form{margin-top:36px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px}.feed_form input{height:50px;border-radius:5px;background-color:#fff;margin-bottom:15px;border:none;padding:0 20px;font-weight:300;font-size:14px;color:#4b4b4b}.feed_form input:nth-child{margin-bottom:20px}#media(max-width:1200px){.promo__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}}#media(max-width:991px){.header{-ms-flex-pack:distribute;justify-content:space-around}.header__logo img{width:80%}.header__official span{font-size:16px}.header__contact .button{width:130px}.header__phone{font-size:16px}.promo__header{font-size:38px}.promo__subheader{font-size:20px}.promo .button_main{width:260px}.promo__link{font-size:14px}.consultation .title_left{text-align:center}.consultation__descr{text-align:center}.consultation .feed_form{margin:0 auto;margin-top:36px}}#media(max-width:767px){.header__phone{display:none}.header button{display:none}}#media(max-width:575px){.header{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.header__logo{width:200px}.header__official{font-size:10px}.header__official span{font-size:14px}.promo{height:420px;padding:21px 5px 20px 5px}.promo__header{margin-top:70px;font-size:30px}.promo__subheader{margin-top:5px;font-size:16px}.promo__icons{display:none;margin:0}.promo .button_main{font-size:14px;margin-top:47px}.promo .button{width:220px}.title{font-size:26px}.consultation{padding-top:60px}.consultation .title_left{line-height:30px}}#media(max-width:370px){.header__logo{width:100%}.header__logo img{display:block;margin:0 auto;width:160px}.header__official{display:none}.promo{padding:21px 8px 25px 8px}.promo__header{font-size:26px}.promo__subheader{font-size:14px}.promo .button_main{margin-top:35px}.title{font-size:22px}}
Try this code:
.promo {
height: 650px;
padding: 21px 0 93px 0;
background-image: url(../img/background_first.jpg);
background-repeat: no-repeat;
background-position: center;
}
I was making a website and after doing some coding with css, I pushed the data to my hosting. But, the website css wasn't showing up what is was supposed to be! I got a lot of support here, discord, and namecheap (my hosting). And they all said it has to do with browser caching.
After doing some experiments I concluded that it changes with wifi connection. I went to my school wifi and the css looked normal, but back home it didn't look what it was supposed to.
I isolated the error and found it had to do with 1 css file. But after taking the identical code to a different file it worked fine. Granted, the code did change while I was putting it into a different file since there was css there before.
Here is the code that seemed to cause it:
h1 {
font-family: "JetBrains Mono ExtraBold", monospace;
color: #2474ff;
text-align: left;
float: left;
margin: 5px 30px;
font-size: xxx-large;
box-shadow: 0 0 25px 5px #0ff;
border: solid dodgerblue 4px;
border-radius: 15px;
animation: crazy 3s infinite;
}
#keyframes crazy {
50% {box-shadow: 1px 2px 3px blue}
}
.content {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
border: 4px solid dodgerblue;
box-sizing: border-box;
width: 300px;
height: 500px;
padding: 5px;
display: block;
border-radius: 10px;
}
.content h3{
font-size: 30px;
font-weight: bold;
text-align: center;
}
button {
font-family: "JetBrains Mono ExtraBold", monospace;
}
a {
float: left;
margin-left: 15px;
The problem is fixed now, but I wanna know why this was happening.
This is the intended behavior of browser caching; it's not an error. Your browser "remembers" a file it's already downloaded, and saves that data locally for a period of time instead of re-loading and re-reading it again, so that sites load more efficiently.
Since, while you're developing and frequently changing a file, you don't want this behavior, there are a many things you can do. These are just a few:
• Developer tools built into web browsers, like Chrome Inspector (which will benefit your development in many other ways as well) will have a setting to disable browser cache when it's active, so every time you refresh a page, it will automatically download the freshest files
• You can manually clear the cache on your browser. Most browsers have shortcuts for this (for example, holding down shift while pressing the reload button)
• A simple way to make sure everyone else's browsers downloads the most recent version of your css file, too, is to add a querystring to the end of your css link, and change it every time you make an update. e.g.:
<link rel="stylesheet" type="text/css" href="styles.css?v=1">
(next time you update the file and want to make sure everyone sees those changes, change v=1 to v=2)
This is a browser feature. One of the simplest ways to get around the issue is to "hard refresh" the page.
On Windows it's ctrl + F5
On Mac it's cmd + shift + r
I try to send mail using HTML all the CSS I use works but I set the stroke for the header working nicely in the browser but when i send mail i get black heading in email.
Text-shadows will not be displayed either! Any alternative way to display stroke for font?
h3{
font-family: sans-serif;
margin: 40px 0;
font-size: 40px;
color:#fff;
text-shadow: 0px 0px 1px #9f5a57, 0px 0px 1px #9f5a57;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #9f5a57;
}
<h3>LAUNCHING HAIR</h3>
I know image is the best option, even if CSS is not supported. But my problem is that the header is dynamic, so I can't put the image there.
I saw many solutions but I did not find any solution related to my issue.
I'm applying border-radius for a few elements on my page, and in order to make it work on IE 6-8, I'm using PIE.
Check it out
So as you can see, corners without values (or with values very different from each other) for border-radius, effect gets this weird.
Here's my code:
.cotacao {
-webkit-border-radius: 1px 20px 1px 20px;
-moz-border-radius: 1px 20px 1px 20px;
border-radius: 1px 20px 1px 20px;
border: 10px solid #fff;
}
And specific code for IE
.cotacao {
behavior:url(/Assets/css/common/PIE.htc);
position: relative !important;
}
What's going on? Is this bug related to the border thickness? And, if it is, is there a known workaround?
Thanks!
This is a bug in the PIE 1.0 code. See https://github.com/lojjic/PIE/issues/11
It's fixed in the 2.0 beta if you're willing to try that.
I have downloaded the foundation framework from http://foundation.zurb.com/ with the default theme.
I dont know how to change the colors of various things like navigation bar, buttons, add background and box with shadow for the body ! etc.
I tried to add the following to the app.css but it did not work
body {
background-color: #333;
position: relative;
font-family: helvetica, arial, sans-serif;
color: #666666;
border-right: 1px solid #333;
border-left: 1px solid #333;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
Please suggest what to do.
There is something about scss+foundation but i am not sure what it is... scared to try it also , looks kinda scary.
Din think using Foundation Framework was going to be this and complicated .
What you should do is utilize tools such as Firebug (For Firefox) to inspect the element that you are interested in. This will clearly let you see what CSS is actually in effect for the element and what file/line that code is in so that you can change it. You can also override new values into the code right there in Firefox to see what effect it would have on your page.
This is easy but needs a bit of work ... app.css does the trick by over riding the values inside foundation.css !!
But finding out which element or selector should be overridden is a not easy and especially without knowing most of css. But there is a way around this... i.e. firebug for firefox !
Its a wonderful application that tells me which style is being used anywhere in the website.