Как делать responsivo элемент, добавленный вручную к предопределенному рисунку шаблона?

У меня есть шаблон wordpress у каковой есть рисунок responsivo, но добавьте какие-то элементы html и css, и эти, что fuerón атташе не приспосабливаются к рисунку responsivo рисунка, когда я делаю самый маленький браузер, не приспосабливается div, добавленный к рисунку responsive. что я должен добавлять для того, чтобы они приспособились также? Это то, что он добавляет на странице html, и я храню в архиве css.

<div class="caja" style="text-align: center;">Patrocinador</div>

.caja {

font-family: sans-serif;
font-size: 30px;
font-weight: 400;

color: #ffffff;

background: #000000;

overflow: hidden;
padding: 20px;
text-align: center;
margin: auto;

height: 25px;
width: 1130px;



}
0
задан 22.01.2017, 06:33
0 ответов

После того, как работали с твоим ящиком в средствах PX, всегда идет вмещаться 1130px как установленная ширина экрана, с чем он не делается responsivo.

Решение могло бы быть: меняясь width: 1130px; в max-width: 1130px; и мы добавляем один width:100%;

С этим мы говорим, что ширина нашего ящика идет быть 100 % экрана, но Ваш разрешенный максимум - 1130 пикселей, с чем на экраны с верхней одинокой шириной идет наполнять 1130px экрана.

   

.caja {
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #ffffff;
  background: #000000;
  overflow: hidden;			
  text-align: center;
  padding: 20px 0;
  /* Reglas responsivo */
  width:100%;
  max-width: 1130px;      
}

/* Modificamos algunos valores en pantallas con 500px de ancho o inferior si uno lo desea */
@media screen and (max-width: 500px) {
  .caja {				
    font-size: 20px;				
  }
}
<div class="caja">Patrocinador</div>

На экраны например HD или начальники в 1130px, ты идут наполнять только 1130px, так как с max-width мы признаем Ваш максимум позволенным в px. Если экран нижний в 1130px, если ты идет наполнять 100 %, как возможно наблюдать в примере, когда он работает.

introducir la descripción de la imagen aquí

Решение для того, чтобы ящик наполнил общее количество экрана:

  

.caja {
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #ffffff;
  background: #000000;
  overflow: hidden;			
  text-align: center;
  padding: 20px 0;
  /* Reglas responsivo */
  width:100%;
  /* Solución */
  max-width: 100%;      
}

/* Modificamos algunos valores en pantallas con 500px de ancho o inferior si uno lo desea */
@media screen and (max-width: 500px) {
  .caja {				
    font-size: 20px;        
  }
}
<div class="caja">Patrocinador</div>

Пример Экран HD:

Поработав с %, если, что делается responsivo в любое разрешение экрана.

introducir la descripción de la imagen aquí

1
ответ дан 03.12.2019, 17:35
  • 1
    договора, спасибо, извините и ¿ для того, чтобы элемент div в tamañ или нормальный вместите всю ширину экрана, который не оставляет края в стороны? –  22.01.2017, 20:13
  • 2
    @ArmandoArellano на нормальном экране для того, чтобы он взял полную ширину экрана, podrí эксперт añ adir один @media screen and (max-width:medida deseado) и изменяешь ты .caja в max-width:100%;, сейчас, если ты всегда хочешь, чтобы он взял полную ширину экрана и responsivo, просто изменяешь max-width в 100%. ¡ Приветствие! –  22.01.2017, 20:32
  • 3
    я ищу, что я вместил полную ширину, ¿ podrí схвати добавлять это к ответу, пожалуйста? –  22.01.2017, 20:50
  • 4
    @ArmandoArellano ты и измененный мой ответ, ты añ adido другой пример, с чем .caja приспосабливается способа responsivo к полной ширине любого экрана. –  22.01.2017, 21:34
  • 5
    mucchas спасибо, привет –  22.01.2017, 21:42

Теги

Похожие вопросы