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

Question

У меня есть сайт флюидной сетки, который я разрабатываю с использованием DW CS6. Я пытаюсь разместить клик для вызова изображения и щелчок на текстовое изображение, которое я хочу использовать только на мобильном устройстве. Я знаю, что на устройствах определенного размера есть изображения и текст, но я недостаточно осведомлен, чтобы понять, как это сделать. Я попытался добавить ограничения размера экрана в нижней части моего CSS, но это тоже не сработало. У меня есть код, который работает с текстом или вызовом с мобильного устройства. :)

Можно ли создать div-класс id = "mobile"? Я был бы очень признателен за любое направление, которое можно было бы дать. У меня есть медиа-запросы, которые входят в стандартную версию шаблона Fluid Grid в DW CS6.

HTML

<a href="tel:2513676152"><img src="images/callme.jpg" width="100" height="100" alt="click to call"></a> 
<a href="sms:2513676152"><img src="images/textme.jpg" width="100" height="100" a;t="click to text"></a> 

CSS

/* 
    Dreamweaver Fluid Grid Properties 
    ---------------------------------- 
    dw-num-cols-mobile:  5; 
    dw-num-cols-tablet:  8; 
    dw-num-cols-desktop: 10; 
    dw-gutter-percentage: 25; 



/* Mobile Layout: 480px and below. */ 
.gridContainer { 
    margin-left:auto; 
    margin-right:auto; 
    width:87.36%; 
    padding-left:1.82%; 
    padding-right:1.82%; 
} 

#LayoutDiv1 { 
    clear:both; 
    float:left; 
    margin-left:0; 
    width:100%; 
    display:block; 
} 

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 
@media only screen and (min-width: 481px) { 
.gridContainer { 
    width:90.675%; 
    padding-left:1.1625%; 
    padding-right:1.1625%; 
} 

#LayoutDiv1 { 
    clear:both; 
    float:left; 
    margin-left:0; 
    width:100%; 
    display:block; 
} 
} 

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ 
@media only screen and (min-width: 769px) { 
.gridContainer { 
    width:88.2%; 
    max-width:1232px; 
    padding-left:0.9%; 
    padding-right:0.9%; 
    margin:auto; 
} 

#LayoutDiv1 { 
    clear:both; 
    float:left; 
    margin-left:0; 
    width:100%; 
    display:block; 
} 
} 

Answer 1

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

/* DESKTOP CODE HERE */ 

@media screen and (max-device-width: 800px) { 
    /* MOBILE CODE HERE */ 
} 

Answer 2

в своем коде вы при условии, у вас есть разные медиа-запросов. Последний для рабочего стола. Когда ширина экрана превышает 768 px, этот мультимедийный запрос используется для определенных стилей. Таким образом, в этом запросе вы будете использовать свой «display: none» или «visibility: hidden» (зависит от того, какой эффект вы хотите достичь), чтобы не показывать изображение.

Пример:

@media only screen and (min-width: 769px) { 
    .yourimgclass{display:none; (or) visibility:hidden;} 
}