My struggle to change the font-size of text fetched from an AJAX request has been futile, leading me to consider using the !important declaration. Despite my efforts to place the font-size property in various locations, even inline, the dev console always displays Bootstrap's font size as active, with mine crossed out. Initially, the page loads default text in a 90px font, but upon clicking the button to retrieve remote server text, I am greeted with Bootstrap's smaller font size, typically around 14px. Below are my unsuccessful attempts at resolving this issue. Any suggestions?
<!DOCTYPE html>
<html lang="en">
<!-- Bootstrap Links & Google Font Links-- Placement At Top Works Better in IDE used for Development -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Great+Vibes">
<!-- style -->
<style>
body {
font-family: Great Vibes, serif;
background-color: #8A2BE2;
font-size: 90px;
color: #FFFFFF;
}
#display {
background-color: #000000;
color: #FFFFFF;
font-size: 90px;
min-height: 50%;
min-height: 50vh;
margin: 100px 200px 100px 200px;
align-items: center;
}
/* word-wrap added to ensure quote remains in container */
.quote-formatting {
font-family: Great Vibes, serif;
font-size: 90px;
word-wrap: break-word;
}
#bootstrap-font-override {
font-size: 90px;
}
</style>
<script>
$(document).ready(function () {
$("#getQuote").on("click", function () {
$.ajax({
crossDomain: true,
dataType: "jsonp",
url:"https://api.forismatic.com/api/1.0/",
// appended to url in GET request as specified by API docs
jsonp: "jsonp",
data: {
method: "getQuote",
format: "jsonp",
lang: "en"
},
// take contents of JSON file from API and update html
success: function (json) {
var html = "";
html += '<h3>"' + json.quoteText + '"</h3>';
html += '<h5> -' + json.quoteAuthor + '</h5>';
$(".json-text").html(html);
},
// display when ajax request doesn't quite work out
error: function () {
alert("error!");
}
});
});
});
</script>
</head>
<body id="bootstrap-font-override">
<div id="container-top" class="vertical-align container">
<div class="container text-center">
<h1>Heading</h1>
</div>
<div id="display" class="row">
<div id="bootstrap-font-override" class="col-md-12 quote-formatting text-center">
<div style="font-size: 90px" id="bootstrap-font-override" class="json-text">Replace text on button click</div>
</div>
</div>
</div> <!-- container-top -->
<div id="container-btm" class="container">
<div class="row">
<div class="col-md-12 text-center">
<button id="getQuote" class="btn btn-default">Get Quote</button>
</div>
</div>
</div> <!-- container-btm -->
</body>
</html>