X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Best Seller Block and Screen Resolution (https://forum.x-cart.com/showthread.php?t=71687)

TrevorH 03-24-2015 08:33 AM
Best Seller Block and Screen Resolution
 
Hi,

When I turn on the bestseller block it shows fine on a larger screen.

If you look on a laptop the images are overlapped.

I think it has something to do with the table on the middle of my page.

Could anyone take a look and give me some advice on it please?

www.aicsupplyinc.com

Thanks,

Trevor

cherie 03-24-2015 03:19 PM
Re: Best Seller Block and Screen Resolution
 
Correct, convert from a table to inline-block elements so they wrap no matter how wide the browser window is.

totaltec 03-24-2015 04:26 PM
Re: Best Seller Block and Screen Resolution
 
Quote:
Originally Posted by TrevorH
Could anyone take a look and give me some advice on it please?
Trevor,
Cherie is absolutely correct. Here is one of the tables converted to divs:
Code:
<div style="text-align: center;"> 
        <div style="display: inline-block; vertical-align: top; min-height: 110px;">
        <a href="http://bpw.hu/?language=en" target="_blank"><img alt="BPW" src="/images/companylogos/bpw-logo.png" style="height: 100px; width: 100px; margin-left: 30px; margin-right: 30px;"></a>
        </div>
       
        <div style="display: inline-block; vertical-align: top; min-height: 110px;">
          <a href="http://www.omnigear.com/" target="_blank"><img alt="Omni Gear" src="/images/companylogos/omnigear_logo.png" style="width: 150px; height: 40px; margin-left: 30px; margin-right: 30px;"></a>
        </div>

        <div style="display: inline-block; vertical-align: top; min-height: 110px;">
          <a href="http://flo-torq.com/" target="_blank"><img alt="Flo Torq" src="/images/companylogos/Flo-torq_logo.jpg" style="height: 29px; width: 150px; margin-left: 30px; margin-right: 30px;"></a>
        </div>

        <div style="display: inline-block; vertical-align: top; min-height: 110px;">
          <a href="http://rpmdrivelines.com/" target="_blank"><img alt="RPM Transmissions" src="/images/companylogos/rpmlogo.png" style="width: 150px; height: 34px; margin-left: 30px; margin-right: 30px;"></a>
        </div>
       
        <div style="display: inline-block; vertical-align: top; min-height: 110px;">
          <a href="http://kelloggcompressor.com/" target="_blank"><img alt="Kellogg Compressor" src="/images/companylogos/Kellogg-logo-wo-bg.png" style="width: 150px; height: 70px; margin-left: 30px; margin-right: 30px;"></a>
        </div>

        <div style="display: inline-block; vertical-align: top; min-height: 110px;">
          <a href="http://butlerproducts.com/" target="_blank"><img alt="Butler Prducts" src="/images/companylogos/Butler_logo_small.jpg" style="width: 100px; height: 66px; margin-left: 30px; margin-right: 30px;"></a>
        </div>
</div>

However those inline styles are messy, and should really be put in a style sheet.


All times are GMT -8. The time now is 11:24 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.