CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bertone_in
bertone_in

Reputation: 67

Custom CSS won't override default bootstrap css

I'm pretty new in HTML and CSS and I'm stuck here...

Website is: http://www.i1cevic.com/

Basically, the 'bold text' won't be the font-size I defined in my CSS: 

h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.05;
letter-spacing: -2.7px;
font-size: 89px;
}




h1 small {

font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: -2.7px;
font-size: 70px;

}

The class I'm having problem with is h1, as you can see font-size is defined as 89px but it keeps showing Bootstrap's default h1 size : 35-36px or something, I went past this issue by writing !important after font-size: 89px but that's not the solution...

Here's the HTML code. (not including head section)

<body id="page-top">
<header>
    <div class="header-content">
        <h1><small><font color="black">Light Text</font></small></h1>
        <h1><font color="black">Bold Text</font></h1>
        <br>
        <a class="btn btn-primary btn-xl page-scroll" href="#about">Find
        Out More</a>
    </div>
</header>
<!-- jQuery -->
<script src="js/jquery.js">
</script>
<!-- Bootstrap Core JavaScript -->

<script src="js/bootstrap.min.js">
</script>
<!-- Plugin JavaScript -->

<script src="js/jquery.easing.min.js">
</script>
<script src="js/jquery.fittext.js">
</script>
<script src="js/wow.min.js">
</script>
<!-- Custom Theme JavaScript -->

<script src="js/creative.js">
</script>
</body>
</html>

Upvotes: 2

Views: 506

Answers (5)

simo logas
simo logas

Reputation: 11

the problem is in the head section, you need to place your bootsrap css link first, then you link to your custom css, like this :

<!-- first your bootstrap link-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- second your custom css-->
<link rel="stylesheet" href="css/main.css">

good luck

Upvotes: 0

Eric Phillips
Eric Phillips

Reputation: 131

inspecting it now there's style attributes in your markup

Screenshot: dev tools showing inline style setting size to 65px

A look at the source shows it's not there so one of your scripts is adding it in.

Upvotes: 0

Peter Wilson
Peter Wilson

Reputation: 4319

I just removed your inline style and I could see your style overridiing bootstrap style

so I think it's your browser cache try to clear cache or do hard reload ctrl+shift+Rif your are using windows and chrome of cmd+shift+R on Mac OSX

enter image description here

Upvotes: 0

NormundsP
NormundsP

Reputation: 413

  1. I dont see in your code where you use your own css file.

  2. That's why I defined css in your head part:

    h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.05; letter-spacing: -2.7px; font-size: 89px; }

  3. And I remove styles from yours h1 tags.

    font-size: 65px;

Upvotes: 0

peppinoibra
peppinoibra

Reputation: 139

You marked this "jquery.fittext.js" script that resizes the text depending on the size of the page, and so natural that you have this problem. This script adds the tags "h1" the "font-size".

Upvotes: 1

Related Questions