Убрать фиксированный баннер с мобильных.

147

WebMage

2 августа 2018, 09:16

552

Что то так сложно для меня, прошу помощи.

код который выводит этот баннер:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фиксированный баннер</title>
  <style>
   .banner-1 {
    position: fixed; /* Фиксированное положение */
    left: 20px; /* Расстояние от левого края окна браузера */
    top: 30%; /* Расстояние сверху */
    padding: 2px; /* Поля вокруг */ 
    background: #ffe; /* Цвет фона */ 
    border: 1px solid #333; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <div class="banner-1"><img src="/wp-content/uploads/2018/08/banner_dlya_fitnes.png" alt="штука редкая"></div>
 </body>
</html>

Желательно чтобы не лезть куда то в CSS, прямо в этот код вписать что то, чтобы баннер отображался на компьютерах и на планшетах а на мобильных не отображался.

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

P.S. нужно мне это по тому что в мобильной версии баннер наезжает с краю на контент и фигня получается.

363

lkm

2 августа 2018, 09:38

#1

@media (max-width: 500px) { .banner-1 { display: none; } }

2

147

WebMage

2 августа 2018, 10:31

#2

lkm:
@media (max-width: 500px) { .banner-1 { display: none; } }

Спасибо! Помогло, только вставил так:

<style type="text/css">

@media (max-width: 900px) { .banner-1 { display: none; } }

</style>

На той странице где нужно было сделать.

170

infant

2 августа 2018, 10:34

#3

900px захватывает и планшеты тоже, вам 500 посоветовали как самый раз.

147

WebMage

2 августа 2018, 12:14

#4

infant:
900px захватывает и планшеты тоже, вам 500 посоветовали как самый раз.

На планшете можно чтобы этот баннер был, он не закрывает контент.

M

90

mmkulikov

2 августа 2018, 12:16

#5

WebMage:
На планшете можно чтобы этот баннер был, он не закрывает контент.

Потому Вам и подсказали на ошибку. Надо не 900 а 500 (даже 480) чтобы остался на планшетах )

Сдается, обращаться скайп avdesk-it-kmm Верстка, кодинг - контакты в профиле... VPS от 5€ (https://gmhost.com.ua/?partner=10255)

Маркетинг для шоколадной фабрики. На 34% выше средний чек

Open AI тестирует память для ChatGPT