Изменить размер всего содержимого DIV

Question

Я создал эту панель в HTML / CSS, и я хотел бы что-то сделать. Когда человек использует планшет, весь контент изменяется, как изображение (с «шириной: 100%»). Я хотел бы изменить размеры изображений и текстов.

Что я делаю не так? Таким образом, текст и изображения остаются друг на друге.

JSfiddle LINK: https://jsfiddle.net/z5ygfx3n/8/

Существует пример содержимого элемента div:

<div class="bloco-dolar-americano" style="position: absolute; left: 25%; top: 4%; width: 379px; height: 243px; background: NONE; display: block;">ALL CONTENT</div>

Спасибо

Answer 1

Прежде всего вам нужно прочитать о медиа-запрос .

У меня есть фрагмент создания. Посмотрите, как использовать групповой класс [class*=bloco-dolar-]

Надеюсь, что это поможет.

Дайте мне знать дополнительные разъяснения.

Примечание: У меня есть css в медиа-запросах max-991 и min-768, поэтому, пожалуйста, отметьте этот размер.

  @media only screen and (min-width: 768px) and (max-width: 991px){
    .cotacao-responsiva{
  color: white;
  font-family: arial;


  font-size: 18px;
}

body{
  background: black;
  
}


div[class*=bloco-dolar-] {
    position: unset !important;
    width: 100% !important;
    max-width: 320px;
    margin-bottom: 3%;
    text-align: center;
    display: inline-block !important;
    height: auto !important;
    margin-bottom: 50px;
}
div[class*=bloco-dolar-] .cotacao-pais {
    width: 100%;
    clear: both;
}
div[class*=bloco-dolar-] .cotacao-pais img {
    width: 100%;
    height: auto;
        margin: 0 !important;
}
div[class*=bloco-dolar-] .cotacao-texto {
    width: 100%;
    float: left;
    clear: both;
}
div[class*=bloco-dolar-] .cotacao-texto br {
    display: none;
}
.cotacao-responsiva{text-align: center;}
}

<div class="cotacao-responsiva" style="position: relative; width:100%; height: 1000px; background: none;">

<div class="bloco-dolar-americano" style="position: absolute; left: 25%; top: 4%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left;le "><div style="margin-bottom:5px"><b>DOLAR AMERICANO</b></div><br/><img width= "80%" class="aligncenter size-full" style="margin-left: 12px" src="http://www.axbrcambio.com.br/baloes/balao-eua.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>

 <div class="bloco-dolar-americano" style="position: absolute; left: 55%; top: 4%;width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>EURO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-euro.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 5%; top: 15%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR CANADENSE</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-canadai.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 23%; top: 38%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>LIBRA</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-libra.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 40%; top: 30%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR AUSTRALIANO</b></div><br/><img style="margin-left:30px" width= "50%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-aus.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 63%; top: 30%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR NEOZEOLANDÊS</b></div><br/><img style="margin-left: 50px" width= "50%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-neo.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 43%; top: 56%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO URUGUAIO</b></div><br/><img width= "70%" class="aligncenter size-full" style="margin-left: 10px" src="http://www.axbrcambio.com.br/baloes/balao-peso-uruguai.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 5%; top: 48%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO ARGENTINO</b></div><br/><img width= "60%" class="aligncenter size-full" style="margin-left: 20px" src="http://www.axbrcambio.com.br/baloes/balao-peso-arg.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 26%; top: 64%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO CHILENO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-peso-chile.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 6%; top: 75%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO COLOMBIANO</b></div><br/><img width= "60%" class="aligncenter size-full" style="margin-left: 30px" src="http://www.axbrcambio.com.br/baloes//balao-peso-colombia.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 65%; top: 55%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>PESO MEXICANO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-peso-mexico.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 28%; top: 88%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>FRANCO SUIÇO</b></div><br/><img width= "70%" class="aligncenter size-full" style="margin-left:15px" src="http://www.axbrcambio.com.br/baloes/balao-franco-sui.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 47%; top: 85%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>IENE</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-iene.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 67%; top: 84%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>SOL PERUANO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-sol-peru.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
  </div>