Как сделать текст в div отзывчивом?

У меня есть 5 разделов с текстом по 2-3 строки на каждом. Но в мобильной версии она отображается как по длине, и я хочу сделать ее в строках, поскольку она идет отзывчиво.Как сделать текст в div отзывчивом?

Пожалуйста осветлить меня в связи с этим

Благодаря

TeekeyBee

.article_left_bg { 
    background-image: url(images/article_bg_01.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 400px; 
    margin-left: 20px; 

} 

.article_left2_bg { 
    background-image: url(images/article_bg_03.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 320px; 
    margin-left: 12px; 
    margin-top: -30px; 
} 

.article_left3_bg { 
    background-image: url(images/article_bg_05.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 400px; 
    margin-left: 8px; 
    margin-top: -15px; 
} 

.article_right_bg { 
    background-image: url(images/article_bg_02.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 400px; 

} 

.article_right2_bg { 
    background-image: url(images/article_bg_04.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 320px; 
    margin-top: -30px; 
} 

.article_right3_bg { 
    background-image: url(images/article_bg_06.png); 
    background-repeat: no-repeat; 
    height: auto; 
    min-height: 320px; 
    margin-top: -15px; 
} 

.article_title, .article_title1, .article_title2 { 
    width: 350px; 
    padding-bottom:15px; 
    margin-bottom:15px; 
    } 

.article_title h2 { 
    margin:20px 0 5px 0; 
    color:#000; 
    font-size:25px; 
    font-weight:normal; 
    padding: 50px 0 0 58px; 
    } 

.article_title1 h2 { 
    margin:20px 0 5px 0; 
    color:#000; 
    font-size:25px; 
    font-weight:normal; 
    padding: 90px 0 0 58px; 
    } 

.article_title2 h2 { 
    margin:20px 0 5px 0; 
    color:#000; 
    font-size:25px; 
    font-weight:normal; 
    padding: 60px 0 0 68px; 
    } 


.article_title h2 a, .article_title1 h2 a, .article_title2 h2 a{ 
    color:#000} 


.article_title .subtitle, .article_title1 .subtitle { 
    display:block; 
    font-size:15px; 
    font-weight:300; 
    color:#000; 
    padding: 0 0 0 58px; 
    } 

.article_title2 .subtitle { 
    display:block; 
    font-size:15px; 
    font-weight:300; 
    color:#000; 
    padding: 0 0 0 68px; 

} 

.article_descr { 
    width: 290px; 
    color:#000; 
    font-size:12px; 
    line-height:1.2em; 
    font-family:Arial, Helvetica, sans-serif; 
    padding: 0 0 0 58px; 
    } 

.article_item .link_more, 
.article_item .link_more:hover { 
    display:inline-block; 
    line-height:25px; 
    background:url(images/arrow_right.png) 0 0 no-repeat; 
    padding-left:45px; 
    font-weight:400; 
    font-size:18px; 
    color:#000;}

источник

2014-02-04 KrisB

Вы можете поделиться тем, что вы пробовали до сих пор. – Rohit416

Я загрузил css, который я использую, чтобы сделать отзывчивый – KrisB

Если вы установите размер шрифта в относительных единицах, а не абсолютных единицах он должен решить проблему:

.article_item .link_more, 
 
.article_item .link_more:hover { 
 
    display:inline-block; 
 
    line-height:25px; 
 
    background:url(images/arrow_right.png) 0 0 no-repeat; 
 
    padding-left:45px; 
 
    font-weight:400; 
 
    font-size:.3vw; 
 
    color:#000;}

<div class="article_item"> 
 
    I am some text 
 
</div>

источник

2014-11-24 22:18:58 robotDad

Как сделать текст в div отзывчивом?

ответ

Смежные вопросы