How to prevent text resizing in the browser

Question

How to make text display on a mobile phone in the same way as on the desktop?

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

Thanks.

Desktop:

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> 

Answer 1

SOLVE:

I found that by adding a float: left style to a div containing text, the text of the mobile phone behaved the same as on the 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;} 

Answer 2

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; } }