How to prevent mobile browser from resizing text

Question

How do I make the text display on a mobile in the same way it does on a desktop?

The text in the light-pink area is the same on desktop and mobile. This is exactly what I need to achieve for the 'Testimonials' section (and many other areas too!)

Thank you.

Desktop view:

Mobile view:

CSS:

.testimonials{
width: 950px;
display: block;
margin-left: auto;
margin-right: auto;
color: #f3bcd4;
font-size: 11px;}

.testimonials h2{
font-size: 16px;
font-weight: bold;}

blockquote{
margin: 1.5em 0 1.5em;
padding: 0 2.5em 0 2.5em;
position: relative;}

blockquote:before{
color: #f3bcd4;
content: "\201C";
font-size: 5em;
position: absolute;
left: 5px;
top: 0.3em;
line-height: 0.1em;}

blockquote:after{
color: #f3bcd4;
content: "\201D";
font-size: 5em;
position: absolute;
right: 3px;
bottom: 0em;
line-height: 0.1em;}

HTML:

<div class="testimonials">
    <h2>Testimonials</h2>
    <blockquote>
        Pellentesque habitant...
    </blockquote>
    <blockquote>
        Pellentesque habitant...
    </blockquote>
    <blockquote>
        Pellentesque habitant...
    </blockquote>
</div>

You are using ems which are based on the default font-size. I am guessing you have a media query that is changing the default font-size but I would need some more info to help. As a side not, that font size is ungodly small and I would recommend making that a little bigger to prevent your viewers from ripping their eyes out. :] — Josh Powell, Nov 06 '13 at 02:12
Mike, they are FF (v25) on Windows and FF on Android (KitKat). — Rick, Nov 06 '13 at 02:19
Josh, there are other text areas of the site which do not use ems and also enlarging on mobile. The size is small, but that's ok. A pinch zoom or double-tap is all that's required for the text to be clearer. — Rick, Nov 06 '13 at 02:21

score 3 · Answer 1 · answered Nov 07 '13 at 00:18

3

SOLVED:

I found that by adding a float:left style to the div containing the text, the mobile text behaved as it does on a desktop. Does anyone understand why?

blockquote {
float: left;
width: 255px;
margin: 1.5em 0 1.5em;
padding: 0 2.5em 0 2.5em;
position: relative;}

answered Nov 07 '13 at 00:18

Rick

141
3
16

1

What the hell. This solved it for me. I was amazed because I had several divs with the same style and they rendered in different sizes, depending on the amount of elements. Three or more rendered the text smaller. Until I applied float: left; to the
containing them. I'm baffled.
– Rorok_89 Sep 28 '16 at 16:54
Looks much better. It's really impossible to design for browsers that pull unpredictable nonsense out of nowhere, to say it politely. It's bad enough mobile viewport measurements are totally virtual and arbitrary. Random font sizes add insult to injury. For the cssgrid and flexbox newbies: remember to `clear:both` for the next div in your vertical stack. – PJ Brunet May 10 '23 at 18:22

score 1 · Answer 2 · answered Nov 06 '13 at 02:25

1

Try

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     .testimonials blockquote {
         font-size: 11px !important;
     }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
     .testimonials blockquote {
         font-size: 11px !important;
     }
}

/* -- OR -- */

 /* iPads (landscape and below) ----------- */
@media only screen and (max-device-width : 1024px) {
    .testimonials blockquote {
         font-size: 11px !important;
     }
}

answered Nov 06 '13 at 02:25

ElvinD

667
1
7
10

ElvinD, thank you but neither of those worked. There was no change. – Rick Nov 06 '13 at 02:30
try to add .testimonials blockquote p { /* CSS here */} if it is still under HTML paragraph (p). Maybe you need to provide me your web url would be better. – ElvinD Nov 06 '13 at 02:50
ElvinD, thanks again, but that didn't work either. The text is not within a p element. The site is of an adult nature, so I should not name the site in here. – Rick Nov 06 '13 at 04:37

How to prevent mobile browser from resizing text

2 Answers2

Linked

Related