2

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>
Improve this question

5 Answers 5

Reset to default
1

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".

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Read the OP's question. I went past this issue by writing !important after font-size: 89px but that's not the solution...
I had not read that part, but now I've added the solution below.
This is it! Thank you all!
especially like to thank the two geniuses that have commented on my solution in a negative way, but it did not help ...
0
  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;

Improve this answer

1 Comment

thanks for reply! As I replied above, actually my stylesheet is under bootstrap default CSS but I didn't included it in html copy/paste, thanks again and sorry for my mistake.
0

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

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

and as @peppinoibra points out, the script that's doing it is jquery.fittext.js which is resizing every thing based on the window width.
0

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

Improve this answer

1 Comment

thanks mate for fast reply, actually my stylesheet is under bootstrap default CSS but I didn't included it in html copy/paste, thanks again and sorry for my mistake.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.