Различные размеры на рабочем столе и в мобильном телефоне

Question

У меня есть следующая таблица, где я показываю изображение продукта. В представлении рабочего стола я хочу отобразить исходный размер изображения, а в мобильной версии я хочу отображать 180 пикселей и центрировать его.

Код выглядит следующим образом:

<h2><?php echo $product->product_name; ?></h2> 
<div class="panel panel-default"> 
    <div class="panel-body"> 
    <table class="table"> 
     <tr><th></th><td ><img id="myImage" src="<?php echo CRM_URL; ?>img/product_images/<?php echo $product->product_image; ?>" /></td></tr> 
     <tr><th>Model Number</th><td><?php echo $product->product_model_number; ?></td></tr> 
     <tr><th>Category</th><td><?php echo $product->category; ?></td></tr> 
     <tr><th>Brand</th><td><?php echo $product->product_brand; ?></td></tr> 
     <tr><th>Price</th><td><?php echo $price; ?></td></tr> 
     <tr><td colspan="2"><?php echo $cartForm; ?></td></tr>    
    </table> 
    </div> 
</div> 

и код CSS:

@media(min-width: 320px) { 
    .product_search_textbox { 
     width: 100px; 
    } 
    #header div.topbar{ 
     height: 150px; 
    } 
    .homepage-slider-content{ 
     margin-top:18px; 
    } 

    #myImage { 
     width: 180px; 
    } 
} 

Я до сих пор не могу получить изображение, чтобы изменить в мобильном режиме, кто-то может мне помочь, пожалуйста? Что я делаю не так?

Answer 1

Прежде всего, это должно быть (max-width: 320px), потому что вы хотите, чтобы мобильный CSS был захвачен, когда ширина уменьшилась ниже 320px. Кроме того, должно быть space между @media и (max-width: 320px) так:

@media (max-width: 320px) { 
    .product_search_textbox { 
     width: 100px; 
    } 
    #header div.topbar{ 
     height: 150px; 
    } 
    .homepage-slider-content{ 
    margin-top:18px; 
    } 

    #myImage { 
    width: 180px; 
    } 
}