Issues with Inline-Block making Images Smaller? - php

Question

I'm trying to get these three images on this page to load in one after each other. When I set it to "Inline-Block" in css, it works, but the images get really small.
https://www.palmersdeliandmarket.com/holiday/
Here's my CSS:
.categories ul li a.current { font-weight: bold; }
#shopp .category { position: relative; display: inline-block;}
#shopp .views { display: inline; position: absolute; right: 0; top: 0; }
#shopp .views button { border: 1px solid transparent; background: none; cursor: pointer; padding: 2px; margin-bottom: -3px; }
#shopp .views button.hover { background-color: #ebebeb; border: 1px solid #777; }
#shopp .views li { display: inline; }
#shopp .orderby { float: right; }
and my HTML:
<?php if(shopp('category','hasproducts','load=coverimages')): ?>
<div class="alignright"><?php shopp('category','pagination','show=10'); ?></div>
<ul class="products">
<li class="row"><ul>
<?php while(shopp('category','products')): ?>
<?php if(shopp('category','row')): ?></ul></li><li class="row"><ul><?php endif; ?>
<li class="product">
<div class="frame">
<?php shopp('product','coverimage','setting=gallery-previews'); ?>
<div class="details">
<h4 class="name"><?php shopp('product','name'); ?></h4>
<p class="price"><?php shopp('product','saleprice','starting=from'); ?> </p>
<?php if (shopp('product','has-savings')): ?>
<p class="savings">Save <?php shopp('product','savings','show=percent'); ?></p>
<?php endif; ?>
<div class="listview">
<p><?php shopp('product','summary'); ?></p>
<form action="<?php shopp('cart','url'); ?>" method="post" class="shopp product">
<?php shopp('product','addtocart'); ?>
</form>
</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul></li>
</ul>
<div class="alignright"><?php shopp('category','pagination','show=10'); ?></div>
</div>
<?php else: ?>
<?php if (!shopp('catalog','is-landing')): ?>
<?php shopp('catalog','breadcrumb'); ?>
<h3><?php shopp('category','name'); ?></h3>
<p>No products were found.</p>
<?php endif; ?>
<?php endif; ?>
Thanks, any help is appreciated.

Answer 1

display: inline-block + width: auto gives a width only large enough to fit the contents. Add width: 100%.