1

デスクトップと同じようにモバイルでもテキストを表示するにはどうすればよいですか?

薄いピンク色の領域のテキストは、デスクトップとモバイルで同じです。これは、まさに「お客様の声」セクション (および他の多くの領域) で達成する必要があるものです。

ありがとうございました。

デスクトップ ビュー: デスクトップ ビュー

モバイル ビュー: モバイル ビュー

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>
4

2 に答える 2

2

解決済み:

テキストを含む div に float:left スタイルを追加すると、モバイル テキストがデスクトップと同じように動作することがわかりました。誰かが理由を理解していますか？

blockquote {
float: left;
width: 255px;
margin: 1.5em 0 1.5em;
padding: 0 2.5em 0 2.5em;
position: relative;}
于 2013-11-07T00:18:41.157 に答える
1

試す

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

/* - また - */

 /* iPads (landscape and below) ----------- */
@media only screen and (max-device-width : 1024px) {
    .testimonials blockquote {
         font-size: 11px !important;
     }
}
于 2013-11-06T02:25:30.253 に答える