Why my custom.css file isn't modifying my materialize.css?
Question
I wanted to modify the grid system, add some borders to rows, columns etc. I know, that I should create separate folder (in my case it's custom.css) and write it there, but it looks like my site sees this file, but doesn't see changes in there.
I tried this in my custom.css
.row-custom {
border: 5px solid #42a5f5;
}
and just add row-custom to row class
Like this
<div class="row row-custom">
<div class="col s12 ">This div is 12-columns wide on all screen sizes</div>
<div class="col s6 ">6-columns (one-half)</div>
<div class="col s6">6-columns (one-half)</div>
</div>
If I add .row-custom into my header in layout.html it works properly.
Here's my custom.css file: https://imgur.com/sNy6z9G
and here's my custom.css view in sources from the website: https://imgur.com/zXKiHxG
(these css I also had to put into header because otherwise it wasn't working, I deleted it earlier)
My header: https://imgur.com/fAI72el
Also, my materialize.min.css works correctly.
I have no idea why there is no changes in sources custom.css, what I'm doing wrong?
3 answers
solution1
0 2019-02-15 17:38:46
I´ve made the same code and it worked, the question is, have you imported your custom.css into the file?
if not, try to import it, or chance the place for importation, as shown in the next example, the above code should work
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Portfolio Blog</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <style> .row-custom { border: 5px solid #42a5f5; } </style> </head> <body> <div class="row row-custom"> <div class="col s12">This div is 12-columns wide on all screen sizes</div> <div class="col s6 ">6-columns (one-half)</div> <div class="col s6">6-columns (one-half)</div> </div> </body> </html>
solution2
0 2019-02-25 17:19:22
Have you tried adding !important to the line in your css file so that you override the materializecss.css defaults?
.row-custom { border: 5px solid #42a5f5 !important; }
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <div class="row row-custom"> <div class="col s12">This div is 12-columns wide on all screen sizes</div> <div class="col s6 ">6-columns (one-half)</div> <div class="col s6">6-columns (one-half)</div> </div> </body> </html>
solution3
0 2021-11-23 17:25:57
在实现 CSS 中，覆盖 CSS 存在问题，因此请使用!important如下所示。
.row-custom { border: 5px solid #42a5f5 !important; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.