Адаптивная верстка

[Bleki]

Доброго времени суток, перейду ближе к делу.

Проблема с адаптивом, верстаю под разрешение 320x480.

В общем не знаю, как сделать, чтобы не видно было текста, в блоке при разрешении 320x480.

И еще один вопрос, как сделать, чтобы при допустим разрешении 320x480, при переходе по ссылке, открывался другой блок, а не тот, который прописан для статической странички.

Вот код:

HTML:div id="popup">
           <span class="win"><p>Вы можете выиграть:</p></span>
           <div id="what-win1"><p>Аккаунты с ресурсами на серверах MineCraft:</p></div>
           <div class="version1"><p>1.5.2 | 1.6.4 | 1.7.2 | 1.8 | 1.10 </p></div>
           <div class="launcher1"><p>EXC | MCGL | FL | MGC | CB | SC | MIX </p></div>
           <div class="info-shop"><p>Все аккаунты перед выдачей проверяются лично администрацией.<br /> Если возникли проблемы с аккаунтом обращайтесь в <a href="https://vk.com/allminersru" id="tp">T/П</a> </p></div>
           <div class="why-buy"><p>Во время покупки не забудте указать данные с помощью которых  с вами можно связаться!</p> </div>
           <div class="why-buy-min"><p>Аккаунты приходят к вам на указанный адрес от 5 минут до 24 часов. </p></div>
           <a href="first.html" target="_blank" class="show_buy"><div id="buy-button"><p>Купить!</p></div></a>
  <div id="close_popup"></div>
 </div>
        <div id="overlay"></div>

 

css:

#win {
 
 text-align: center;
 color: #696969;
 font-size: 1.5625em;
 font-family: 'Lora', serif;
}
#what-win1 {
 
  text-align: center;
  color: #808080;
  font-size: 1.125em;
  font-family: 'Lora', serif;
}

#version1 {

  text-align: center;
  font-size: 1.25em;
  color: #808080;
  font-family: 'Lora', serif;

}

#launcher1 {
 
  text-align: center;
  font-size: 1.125em;
  color: #808080;
  font-family: 'Lora', serif;

}

#info-shop {
 
  text-align: center;
  font-size: 1em;
  color: #808080;
  font-family: 'Lora', serif;

}
#tp {

  text-decoration: underline;
  color: #B22222;
}

#why-buy {
display: block;
margin-top: 6%;
text-align: center;
text-decoration: underline;
color: #B22222;
font-family: 'Lora', serif;

}

#why-buy-min {

  text-align: center;
  font-size: 1em;
  color: #808080;
  font-family: 'Lora', serif;

}

 

P.S display:none; пытался уже прописывать. Я уверен, есть легкий способ, вот и хочу узнавать его у вас, уважаемые пользователи.

 

[spartak9871]

скрыть текст можно через opacity: 0;

элемент с ссылкой при разрешении 320x480 может display: none и показать замену.

Edited November 23, 2016 by spartak9871

[Bleki]

Огромное спасибо!