My goal is to have an h1 header within a row, with font awesome mark quotes displayed on the left and right. I am attempting to resize it once the screen width goes below 768px. Here's what I have so far:
@media screen and (max-width: 768px) {
h1 {
font-size: 10pt;
}
}
.header,
h1 {
font-weight: 400;
text-align: center;
font-size: 20pt;
}
.fa-quote-left {
position: relative;
left: -20px;
top: 15px;
}
fa-quote-right {
position: relative;
left: -90px;
top: 15px;
}
This is an h1 and i want it to be resized, but it won't.agagagkeifjiejfiefjeifjeifjeifje <span class="fa fa-quote-right>
However, the text in my browser remains unchanged even after applying the media query.