X-Cart forums

[TrevorH]

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]

Correct, convert from a table to inline-block elements so they wrap no matter how wide the browser window is.

[totaltec]

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:

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