Почему текст вылезает за див?

Question

[Name Surname]

Добрый день, подскажите пожалуйста, при сжатии окна браузера, текст выпадает за рамки дива. Если задать минимальную ширину самого дива, то при условии что текст выпадать за его грани не будет, сайт будет не корректно смотреться на устройствах с маленьким экраном. Подскажите как вы это делаете? А то у меня впечатление что адаптивность не моё(

Comments

[iBird Rose]

если бы показал пример кода - людям было бы легче тебе ответить.

[Name Surname]

<div class="qwe">
    <div class="chield">
        <h1 class="text">Вас приветствует<br><span >iHome</span></h1>
      <div class="text_box">
        <p>Компания iHome специализируется на оптовой и розничной торговле оригинальной продукции Apple. С нами вы будуте уверены в том, что покупаете по-настоящему качественный товар- предоставляем гарантию,  сертификаты и сервисное обслеживание.</p>
        <p>Мы не просто продаём технику, мы всегда готовы помочь вам с выбором, дать подробности по каждому товару. Не знаете, какой гаджет подойдет ли вам лучше всего? Обращайтесь - подберем для вас устройство, которое будет на все 100% отвечать вашим запросам. </p>
      </div>
        </div>
  </div>

.qwe{
	
	background-size: 100% 100%;
	background-image: url(cap.jpg);
	background-repeat: no-repeat;
	
}
.chield{
	padding-top: 40px;
    margin: 0px 0px 20px 20%; 
    width: 40%;
    opacity: 0.7;
	filter: alpha(opacity=70);
	background: black;
}
.chield p{
	padding: 20px;
	color: white;	
}
.chield h1{
	font-size: 50px;
	color: white;
	text-align:left;
	padding:15px 0 15px 2%;
}
.text_box{
	line-height: 25px;
	font-size: 20px;

[iBird Rose]

Егор Глебенко, наскольно я вижу, у тебя только одно слово не влазит. Потому что у него font-size большой. Задавай таким элементам word-break: break-word;

[Анатолий]

Егор Глебенко, А если бы выложил его в песочницу, было бы еще легче. Благо, я сделал это за тебя :)

[Александр]

Самому интересно, как задавать правильно минимальную ширину )) Надеюсь кто-то расскажет.

[Сергей delphinpro]

https://jsfiddle.net/v7y6bdtt/1/

[s-jet]

Саня,
Минимальную ширину контентной области задавать НЕ нужно. Для сборки адаптивных сайтов у нас есть:

<meta name=viewport content="width=device-width, initial-scale=1">

При этом ширина контента у нас в процентах, также padding и margin тоже в процентах исходя из 100.

Answer 1

[Анатолий]

Уменьшайте размер шрифта.
vw, % или @media-запросы – решать вам