I'm trying to make a block with text adaptive for mobile devices with a resolution of 300px .

But it is impossible to adapt the text.

Code:

 .wrap_bg { width: 100%; height: 1500px; margin-top: 250px; display: flex; flex-direction: column; } .wrap { width: 100%; height: 500px; background-image: url("../images/bg_1.jpg"); background-repeat: no-repeat; background-size:cover; } .wrap div:nth-child(1) { position: absolute; width: 570px; height: 106px; left: 100px; top: 1901px; font-family: 'pt _serif'; font-style: normal; font-weight: normal; line-height: normal; font-size: 40px; color: #FFFFFF; } .wrap div:nth-child(2) { position: absolute; width: 575px; height: 142px; left: 101px; top: 2033px; font-family: 'pt-sans'; font-style: normal; font-weight: normal; line-height: 31px; font-size: 16px; letter-spacing: 0.01em; color: #FFFFFF; } @media screen (max-width: 700px) { .wrap { width: 100%; margin-left: 0; } .wrap div:nth-child(1) { width: 100%; height: auto; } .wrap div:nth-child(2) { width: 100%; height: auto; } } 
 <div class="wrap_bg"> <div class="wrap"> <div>Мы вкладываем душу в совершенствование вкуса</div> <div>Мы относимся к своему бренду как к носителю наших уникальных преимуществ и всегда преподносим его "с поля к столу". Мы используем наши уникальные знания и опыт для выращивания и отбора для наших продуктов самых лучших урожаев с плодородных южно-украинских полей.</div> </div> <div class="wrap_2">d</div> <div class="wrap_3">d</div> </div>

Closed due to the fact that off-topic participants 0xdb , Jarvis_J , Edward , MSDN.WhiteKnight , Kosta B. Jul 13 '18 at 19:57 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - 0xdb, Jarvis_J, Edward, Kosta B.
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • What is the essence of the question? - Sergey Petrashko
  • adaptability on the 300px screen doesn't work - v.slobodynuk
  • Describe the problem normally .. where it does not adapt. what kind of blocks, what kind of properties. do you think of a question about the tonsils with such content - Sergei Petrashko
  • block with text, ego width - v.slobodynuk
  • it doesn't work like that - v.slobodynuk pm

2 answers 2

Use media queries @media screen and (max-width: XXXpx) (forgotten in your record and ) or @media screen and (min-width: XXXpx) :

 .wrap_bg { width: 100%; height: 1500px; margin-top: 250px; display: flex; flex-direction: column; } .wrap { width: 100%; height: 500px; background: #777; } .wrap div:nth-child(1) { position: absolute; width: 570px; height: 106px; left: 100px; top: 1901px; font-family: 'pt _serif'; font-style: normal; font-weight: normal; line-height: normal; font-size: 40px; color: #FFFFFF; } .wrap div:nth-child(2) { position: absolute; width: 575px; height: 142px; left: 101px; top: 2033px; font-family: 'pt-sans'; font-style: normal; font-weight: normal; line-height: 31px; font-size: 16px; letter-spacing: 0.01em; color: #FFFFFF; } @media screen and (max-width: 700px) { .wrap { width: 100%; margin-left: 0; } .wrap div:nth-child(1), .wrap div:nth-child(2){ width: 100%; height: auto; position: static; } } 
 <div class="wrap_bg"> <div class="wrap"> <div>Мы вкладываем душу в совершенствование вкуса</div> <div>Мы относимся к своему бренду как к носителю наших уникальных преимуществ и всегда преподносим его "с поля к столу". Мы используем наши уникальные знания и опыт для выращивания и отбора для наших продуктов самых лучших урожаев с плодородных южно-украинских полей.</div> </div> <div class="wrap_2">d</div> <div class="wrap_3">d</div> </div> 

     .wrap_bg { width: 100%; height: 1500px; margin-top: 250px; display: flex; align-items: center; flex-direction: column; } .wrap { width: 100%; height: 500px; background-image: url("../images/bg_1.jpg"); background-repeat: no-repeat; background-size:cover; } .wrap div:nth-child(1) { position: absolute; width: 570px; height: 106px; left: 100px; top: 1901px; font-family: 'pt_serif'; font-style: normal; font-weight: normal; line-height: normal; font-size: 40px; color: #FFFFFF; } .wrap div:nth-child(2) { position: absolute; width: 575px; height: 142px; left: 101px; top: 2033px; font-family: 'pt-sans'; font-style: normal; font-weight: normal; line-height: 31px; font-size: 16px; letter-spacing: 0.01em; color: #FFFFFF; } @media screen (min-width: 700px) { .wrap { width: 100%; margin-left: 0; } .wrap div:nth-child(1) { width: 100%; height: auto; } .wrap div:nth-child(2) { width: 100%; height: auto; } } 
      <div class="wrap_bg"> <div class="wrap"> <div>Мы вкладываем душу в совершенствование вкуса</div> <div>Мы относимся к своему бренду как к носителю наших уникальных преимуществ и всегда преподносим его "с поля к столу". Мы используем наши уникальные знания и опыт для выращивания и отбора для наших продуктов самых лучших урожаев с плодородных южно-украинских полей.</div> </div> <div class="wrap_2">d</div> <div class="wrap_3">d</div> </div>