Я хочу изменить размер определенных изображений на моем сайте только на мобильном телефоне - см. код

---

Хорошо. Поэтому на моем сайте я могу вводить код только в тело и нижний колонтитул.

Веб-сайт является bothellhomes.com. На главной странице представлены три круглых изображения. На мобильном устройстве я хочу изменить размер изображений так, чтобы они отображались горизонтально. Прямо сейчас, поскольку изображения такие большие, они идут вертикально. Пожалуйста, помогите, это сводит меня с ума! Спасибо.

Код тела:

<section class="three-widgets">
<ul class="small-block-grid-1 medium-block-grid-3 text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/lookinwa/advancedsearch.png" alt="Advanced Search" width="300" height="300" /></a></li>
<li><a title="Interactive Map Search" href="/map_search/results/9k/1/#/?city=Kenmore&city=Bothell&city=Kirkland&city=Woodinville&city=Bellevue&city=Lynnwood&city=Mill%20Creek&city=Redmond&page=1&list_price_max=800000&per_page=100&type=res&type=con&list_price_min=250000"><img src="https://u.realgeeks.media/lookinwa/mapsearch.png" alt="Interactive Map Search" width="300" height="300" /></a></li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/"><img src="https://u.realgeeks.media/lookinwa/homevaluation.png" alt="Home Value" width="300" height="300" /></a></li>
</ul>
</section>

Код нижнего колонтитула:

<script>// <![CDATA[
document.write("<style>.three-widgets {margin-top: -60px;}.three-widgets img {background: #fff;border: 1px solid #ddd;border-radius: 100%;padding: 5px;}.three-widgets p {color: #000}.three-widgets li img {     opacity: .9;-webkit-transition: all 0.3s ease-out;     -moz-transition: all 0.3s ease-out;     -o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.three-widgets li:hover img {border: 1px solid #444444;opacity: 1; -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}@media (max-width:767px) {.three-widgets {     margin-top: 0}}h1{ line-height:38px!important}</style>");
// ]]></script>

Что я уже пробовал:

Все, начиная с добавления еще одного кода @media для меньших размеров экрана. Это не работает!

---