I want to resize certain images on my site ONLY on mobile

Question

On the website I have I can only input code into the body and the footer.

The website is bothellhomes.com. The homepage shows three round images. On a mobile device, I want to resize the images so they show horizontally. Right now, since the images are so large, they go vertically.

Body code:

<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>

Footer code:

<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>

Answer 1

You should think mobile first. Apply styles to the images for the mobile version, and then override them using media queries for the desktop viewing.

You will likely want to add an ID or class to target strictly the desired images. In this case I added an id called round-images. Remove the classes "small-block-grid-1" and "medium-block-grid-3".

Body Code:

<section class="three-widgets" id="round-images">
<ul class="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>

Next, style the images as you want for mobile using CSS. Since you don't have access to the header, you can get around that limitation through inline CSS or as I show below with embedded CSS. Lastly, add a media query to reset the styles how you had them before. Here is the idea:

<style>
/* the following controls image size */
#round-images img{
    max-width:100px;
    max-height:100px;
};
@media (min-width: 768px) {
    #round-images img{
        max-width:300px;
        max-height:300px;
    };
}
/* the following will remove the vertical stacking */
#round-images ul li{
    float:left;
    width:33%;
};
</style>

I got this working without your classes "small-block-grid-1 medium-block-grid-3".

Answer 2

Not sure why you cannot use css. But it seems like you cannot so you can use inline styles to just float them next to each other. Keep in mind that it will become really small images the smaller the screen size is.

<li style="float:left;width="30%">

put this style on all the < li > elements. and the middle one should perhaps have 5% margin on each side to prevent the image edges from touching each other.

 <li style="float:left;width="30%;margin:0 5%;">

You also need to remove the height of the image and only set the width of the image to 100% so it will stretch to the edge of it's container which is the li.

You can of course do the same with css by giving the li's a class and floating them left.