2

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: Desktop view

Mobile 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>
6
  • Which mobile browsers are you having this issue in?
    – Mike Lyons
    Commented Nov 6, 2013 at 2:12
  • 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. :] Commented Nov 6, 2013 at 2:12
  • Mike, they are FF (v25) on Windows and FF on Android (KitKat).
    – Rick
    Commented Nov 6, 2013 at 2: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
    Commented Nov 6, 2013 at 2:21
  • 1
    also check stackoverflow.com/q/11694767/1055987
    – JFK
    Commented Nov 7, 2013 at 0:24

2 Answers 2

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;}
2
  • 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 <a> elements. Three or more rendered the text smaller. Until I applied float: left; to the <div> containing them. I'm baffled.
    – Rorok_89
    Commented Sep 28, 2016 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.
    – Jay Brunet
    Commented May 10, 2023 at 18:22
0

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;
     }
}
3
  • ElvinD, thank you but neither of those worked. There was no change.
    – Rick
    Commented Nov 6, 2013 at 2: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
    Commented Nov 6, 2013 at 2: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
    Commented Nov 6, 2013 at 4:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.