内联块使图像变小的问题？

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">
            <a href="<?php shopp('product','url'); ?>"><?php shopp('product','coverimage','setting=gallery-previews'); ?></a>
                <div class="details">
                <h4 class="name"><a href="<?php shopp('product','url'); ?>"><?php shopp('product','name'); ?></a></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% .