CODEWITHSUNDEEP
htmlcsstextresponsive-design
QBuno
QBuno

Reputation: 61

text responsive media queries not working

So, I am trying to get my text to be responsive with screen size changes. I have been playing around with this media query for a while now, changing the numbers, the percentages and the classes and nothing seems to change much. If i change anything in the media query nothing happens, but if i change the font size of the class .intro that works. So, I know it has something to do with the media queries. I basically just want the .intro class and .text-left class to shrink about 10 points when the screen gets smaller.

HTML:

<p class="intro">About </p>
<p class="text-left">Hello! Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</p>

CSS:

@media only screen and (max-width:800px) {
p {font-size:100%;}
}

@media only screen and (max-width:1100px) {
p {font-size:120%;}
}

.intro {
font-size: 36px;
font-family: microsoft sans-serif;
color: #67523F;
padding: 30px 70px 0px 70px;
}

.text-left { 
font-size: 100%;
font-family: microsoft sans-serif;
color: #67523F;
padding: 0px 70px 100px 70px;
}

I have also tried textfit to achieve the same result but, that didnt seem to work for me either. Here is the code that I put in the header:

<script type="text/javascript">
$.fn.ready(function () {
$("p").fittext(2, {'minFontSize':12,'maxFontSize':50 });
});
</script>

Upvotes: 2

Views: 1049

Answers (1)

Derek Story
Derek Story

Reputation: 9583

Because you initially style them based on their class names, you should use the class names in the media-queries instead of the p tag:

JS Fiddle - Font-sizes increased/mq(max-width)'s decreased for example

Also, the media-query styles should come after the non-queried styles so they are not overwritten:

.intro {
    font-size: 36px;
    font-family: microsoft sans-serif;
    color: #67523F;
    padding: 30px 70px 0px 70px;
}
.text-left {
    font-size: 100%;
    font-family: microsoft sans-serif;
    color: #67523F;
    padding: 0px 70px 100px 70px;
}
@media only screen and (max-width:800px) {
    .intro, .text-left {
        font-size:100%;
    }
}
@media only screen and (max-width:1100px) {
    .intro, .text-left {
        font-size:120%;
    }
}

Upvotes: 3

Related Questions