Перейти к содержанию
MFX

Как скрыть элемент в опенкарт не относящийся к опенкарт ев модильных устройствах

Рекомендуемые сообщения

Здрасте!

 

Подскажите такой вопрос, как скрыть элемент(какой либо сторонний код, например квадратик курса валют и погоды), с глаз окружающих, когда человек заходит с мобильного устройства??? Ну и за компанию, чтобы он уменьшался при уменьшении экрана!?????

 

 

То есть настроил я вроде все норм, на компе выглядит отлично, а вот на мобилке уходит вправо и.... Короче грустная штука...

 

пробовал в див засовывать, потом чет с параметрами игрался, настроить отображение и местоположение настроил, но оно при уменьшении расширения начинает проказничать, этот элемент просто уходит вправо и ничего более не делает, что в мобильной версии просто торчит справа и из-за этого мобильня версия стремно выглядит...(

Изменено пользователем MFX

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@media и display:none

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@media и display:none

Чет немного не догоняю, как.... По подробнее можно?)

 

Облочить вот это:


			<div>	
			<div style="position:absolute;top:210px;left:720px;">	
			<span class="rsb_courses" data-params="font=arial&c_base=RUB&c_1=USD&c_2=EUR&style=light&bg=004BA5&fc=ffffff&bg2=ffffff&fc2=18b534&type=4&angle=1&c=1"></span><script type="text/javascript" src="//rossbanki.ru/js/rsb_c.js"></script>
			</div>

		
	<div style="position:absolute;top:210px;left:460px;">	  
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://bst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">
<div id="gsInformerID-EQelY1Vl45GwA6" class="gsInformer" style="width:250px;height:74px">
  <div class="gsIContent">
    <div id="cityLink">
    <a href="https://www.gismeteo.ru/city/daily/4364/'>https://www.gismeteo.ru/city/daily/4364/" target="_blank">Погода в Казани</a>
    </div>
    <div class="gsLinks">
      <table>
        <tr>
            <td>
            <div class="leftCol">
              <a href="https://www.gismeteo.ru/" target="_blank">
                <img alt="Gismeteo" title="Gismeteo" src="https://bst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
                <span>Gismeteo</span>
              </a>
            </div>
            <div class="rightCol">
              <a href="https://www.gismeteo.ru/" target="_blank">Прогноз на 2 недели</a>
            </div>
            </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=EQelY1Vl45GwA6" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</div>
	
<div style="position:absolute;top:210px;left:883px;">	  
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://bst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">

<div id="gsInformerID-4lwCgQ0e2knO6F" class="gsInformer" style="width:250px;height:74px" >
  <div class="gsIContent">
    <div id="cityLink">
    <a href="https://www.gismeteo.ru/city/daily/6607/" target="_blank">Погода в Каире</a>
    </div>
    <div class="gsLinks">
      <table>
        <tr>
            <td>
            <div class="leftCol">
              <a href="https://www.gismeteo.ru/" target="_blank">
                <img alt="Gismeteo" title="Gismeteo" src="https://bst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
                <span>Gismeteo</span>
              </a>
            </div>
            <div class="rightCol">
              <a href="https://www.gismeteo.ru/" target="_blank">Прогноз на 2 недели</a>
            </div>
            </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=4lwCgQ0e2knO6F" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</div>
</div>	

Во что-то, что может при изменении экрана, либо исчезнуть, либо сложиться как надо(типа друг под другом(там ведь 3 элемента)... Типа вообще независимый элемент...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Попробовал присвоить css

@media (min-width: 800px) {
    #boxing{display:none;}
}

а div указал

<div class="boxing">			
	<div style="position:absolute;top:210px;left:460px;">	  
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://bst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">
<div id="gsInformerID-EQelY1Vl45GwA6" class="gsInformer" style="width:250px;height:74px">
  <div class="gsIContent">
    <div id="cityLink">
    <a href="https://www.gismeteo.ru/city/daily/4364/'>https://www.gismeteo.ru/city/daily/4364/" target="_blank">Погода в Казани</a>
    </div>
    <div class="gsLinks">
      <table>
        <tr>
            <td>
            <div class="leftCol">
              <a href="https://www.gismeteo.ru/" target="_blank">
                <img alt="Gismeteo" title="Gismeteo" src="https://bst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
                <span>Gismeteo</span>
              </a>
            </div>
            <div class="rightCol">
              <a href="https://www.gismeteo.ru/" target="_blank">Прогноз на 2 недели</a>
            </div>
            </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=EQelY1Vl45GwA6" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</div>
	<div>	
			<div style="position:absolute;top:210px;left:720px;">	
			<span class="rsb_courses" data-params="font=arial&c_base=RUB&c_1=USD&c_2=EUR&style=light&bg=004BA5&fc=ffffff&bg2=ffffff&fc2=18b534&type=4&angle=1&c=1"></span><script type="text/javascript" src="//rossbanki.ru/js/rsb_c.js"></script>
			</div>
<div style="position:absolute;top:210px;left:883px;">	  
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://bst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">

<div id="gsInformerID-4lwCgQ0e2knO6F" class="gsInformer" style="width:250px;height:74px" >
  <div class="gsIContent">
    <div id="cityLink">
    <a href="https://www.gismeteo.ru/city/daily/6607/" target="_blank">Погода в Каире</a>
    </div>
    <div class="gsLinks">
      <table>
        <tr>
            <td>
            <div class="leftCol">
              <a href="https://www.gismeteo.ru/" target="_blank">
                <img alt="Gismeteo" title="Gismeteo" src="https://bst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
                <span>Gismeteo</span>
              </a>
            </div>
            <div class="rightCol">
              <a href="https://www.gismeteo.ru/" target="_blank">Прогноз на 2 недели</a>
            </div>
            </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=4lwCgQ0e2knO6F" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</div>
</div>	
</div>

Сирануш ползет вправо... Что не так я сделал!??!?

Изменено пользователем MFX

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

И не сработает когечно же. Вы же ошибку допустили. В css вместо решетки точка должна быть.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@media и display:none

Спасибо большое за помощь...)

 

И не сработает когечно же. Вы же ошибку допустили. В css вместо решетки точка должна быть.

Спасибо за корректировку...) Там еще не "min-width" надо было, а "mах-width"

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От DenisSib
      Всем привет, помогите настроить фоновое изображение.
      Наткнулся на статью как прописать настройки stylesheet. css для фонового изображения, все получилось, но изображение не подходит под мобильные устройства. Сделал второе изображение с нужным размером дальше предлагают вставить вот этот код:
      @media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); } } Вопрос правильный ли код и на какую строку (раздел) в stylesheet его вставить?
    • От Dakart
      Ребят, подскажите пожалуйста, на сайте есть блок категорий, но на мобильных устройствах он не отображается, судя по всему он просто скрыт. В файле header.tpl методом стирания всех hidden-sm hidden-xs и т.д. включить его не удалось. Где еще можно поискать?

    • От danineo1
      Может ли кто адаптировать сайт под мобильные устройства?  :-) 
      https://best-magazin.com
      Ранее был на шаблоне Polianna, который работал на моб устройствах, потом его отключили. 
      Сейчас встала необходимость адаптировать под все устройства!
       
       
      Интересуют вопросы:
      1. Как должно выглядеть ТЗ?
      2. Кто может это сделать?
      3. Сколько времени требуется?

      Поделитесь опытом! Благодарю! 
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.