How to change font size at breakpoints bootstrap 3 - html

Question

I have a page title <h1> MY JOB </h1> with a font size of 70px. I want to automatically change the size of the title to font size 36px when the page reaches a small breakpoint (mobile phone).
How can I achieve this?
Here is what I have done so far:
.title-extra-large-5 {
font-size: 70px !important;
line-height: 80px;
}
#media (max-width: 767px){
.xs-title-extra-large-4{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
<h2 class="title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4">MY JOB.</h2>
</div>
</div>
</div>

Answer 1

In your question, you mention that your title is h1, but, in your example, you use h2.
Apart from that, you are on the right track. You just need to change couple of things:
h2 {
font-size: 70px !important;
line-height: 80px !important;
}
#media (max-width: 767px){
h2{
font-size: 36px !important;
line-height: 42px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8">
<h2>MY JOB.</h2>
</div>
</div>
</div>
You do not need to refer to col-sm-12 and col-xs-12 as bootstrap will render into them by default. And you do not need to have extra classes title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4 you can just refer to h2 or h1.

Answer 2

I'm assuming by certain screen size, you want to change it, right?
ACCORDING TO W3SCHOOLS.COM
You can use the #media property to display a certain set of styles in a certain situation.
body{
background-color: blue; /*For screens with more than 480px screen width.*/
}
p{
font-size:72px;
}
#media screen and (max-width: 480px) { /*Same but for less*/
body {
background-color: lightgreen;
}
p{
font-size:36px;
}
}
Comparing this to your code, I'd say you've got it mostly correct, but be leniant on !important. This can conflict with other styles, so only use it when you do NOT want it to change, or the style won't be applied otherwise.EDIT: It seems you have two classes which do the exact same thing, but conflict with each other due to !important. I'd say just keep one of the classes and change the styles with #media so you're gauranteed it'll work and that it won't conflict with other styles.