Product Comparison Table Wrong

[xteejyx2]

Hi guys, wondering if anyone can help

 

I have the OMG Store theme bought and installed and have began testing adding products, however when looking at the product comparison page, one looks totally incorrect as shown in this image.

 

 

The table is fine for the two default products on the left, but the one I uploaded is wrong. I've tried different sizes, different amounts of blank space in the image, and even manually resized it to 800x800, the same as the others, but it hasn't made any difference.

 

I am useless at coding so haven't manually edited any files at all.

 

Hope someone can explain and help resolve this! Thank you

 

 

[Copernican Theory]

Did you ever find a solution?  I am having this same issue.  I have 5 similar products and use the same image for each, but one product image displays smaller than the other 4.  I first tried duplicating the product and it came out the same.  I deleted the dupe and created another from scratch but that didn't change anything either.  The 'new' product displays the same as the original. 

 

I am using PS 1.6.1.7

Default theme with some changes by me

 

 

I tried regenerating all my images but the problem remains.

I switched back and forth between the default bootstrap theme and mine to see if maybe I messed something up somewhere but still the problem remains.

 

 Stumped I am.

Edited October 2, 2016 by Copernican Theory (see edit history)

[Copernican Theory]

OK - I found out what's causing this.

 

It's the amount of text as well as how many characters in each word in both the product name and it's short description.  The long description doesn't seem to affect this.

 

For example if I took the product that was appearing smaller than all the others and changed it's name to Producttttttttttttttttttttttttttttttttttttttttttt the comparison pic would then be huge.  So in order to get the same spacing between the pic, the product name, and the price you have to have the same amount of characters in the name field.  Some characters take less space than others like L's (lllll) and A's (aaaaa) <---- there's 5 each.   Not sure how to get around this if your product's names vary in length.

 

Same goes for the short description.  To get the spacing equal between the price, the short description, and the Add to Cart button you can get around it by adding additional text or some breaks or enough text to make it run off the page... .  So then, if you take the product with longest description you kinda have to make your other products match that amount of text. The length of a particular word can also affect the width of a column.

 

I guess most PS users are don't have OCD like xteejyxf2 and me.

 

 

 

So MY problem has been answered but I'm not the OP so I'm just gonna leave this thread here the way I found it and let the mods do the dirty work.

Edited October 3, 2016 by Copernican Theory (see edit history)

[Copernican Theory]

Well, after trying numerous title / short descriptions alterations I find it's impossible (for me) to get the comparison table to display correctly and this issue is definitely NOT SOLVED.

 

 

I have almost identical product names and you can see the some of the short descriptions are the same and the table still does not display as it should.

 

Two of the items (1 and 3) are a bit different than 4 and 5 and that's not really a big deal but 2 is just an unspeakable abomination.

 

What can I do to correct this?  The image is the same file in all (800x800) although if I download the pics to my PC they are 250x250.

Edited October 5, 2016 by Copernican Theory (see edit history)

[Daniel Patilea]

Well, after trying numerous title / short descriptions alterations I find it's impossible (for me) to get the comparison table to display correctly and this issue is definitely NOT SOLVED.

 

 

I have almost identical product names and you can see the some of the short descriptions are the same and the table still does not display as it should.

 

Two of the items (1 and 3) are a bit different than 4 and 5 and that's not really a big deal but 2 is just an unspeakable abomination.

 

What can I do to correct this?  The image is the same file in all (800x800) although if I download the pics to my PC they are 250x250.

Can you share us a link?

[Copernican Theory]

Unfortunately, no - store's not live, it's in maintenance.  

[Daniel Patilea]

I advise you to create a css rule in which you set a minimum width for the images

[Copernican Theory]

In Comparator.css?

[Daniel Patilea]

In Comparator.css?

Yes, that's the file

[Copernican Theory]

Will that affect the Responsive aspects of the theme?  If so, I think I'll just leave it be.

 

PS 1.6.1.7

Default theme with changes

Edited October 7, 2016 by Copernican Theory (see edit history)

[Daniel Patilea]

Will that affect the Responsive aspects of the theme?  If so, I think I'll just leave it be.

 

PS 1.6.1.7

Default theme with changes

I'm not sure.

Give it a try

[Copernican Theory]

On lines 90 through 101 there are some minimum width rules already there:

 

@media (min-width: 1200px) {

  .share {

    position: relative;

    top: -350px; } }

@media (min-width: 992px) and (max-width: 1199px) {

  .share {

    position: relative;

    top: -260px; } }

@media (min-width: 768px) and (max-width: 991px) {

  .share {

    position: relative;

    top: -245px; } }

 

I changed all the above for minimum width to be 250px

 

But the problem remains.  

 

So then starting on line 111 (under the responsive area) I added 250px minimum widths for each @media entry.  There were no minimum entries here before but there are some rules there that say width: 100% or 50% or 33.33%.  I didn't touch those.

 

Here's that code starting at line 110:

 

/**** responsive code ******/

@media (min-width: 250px) and (max-width: 992px) {

  #columns table#product_comparison tbody tr td.td_empty span {

    font-size: 14px; }

  #columns table#product_comparison tbody tr td.product-block {

    padding: 14px; }

  #columns table#product_comparison .button.ajax_add_to_cart_button,

  #columns table#product_comparison .button.lnk_view {

    font-size: 14px; } }

@media (min-width: 250px) and (max-width: 767px) {

  #product_comparison table,

  #product_comparison thead,

  #product_comparison tbody,

  #product_comparison th,

  #product_comparison td,

  #product_comparison tr {

    display: block; }

 

  #product_comparison thead tr {

    position: absolute;

    top: -9999px;

    left: -9999px; }

 

  #product_comparison tr {

    overflow: hidden; }

    #product_comparison tr:last-child {

      border-bottom: none; }

      #product_comparison tr:last-child td {

        border-bottom: none; }

 

  #product_comparison td {

    border: none;

    position: relative;

    white-space: normal;

    float: left;

    width: 33.33%; }

    #product_comparison td.td_empty {

      width: 100% !important;

      clear: both; }

    #product_comparison td:last-child {

      border-bottom: none; }

 

  #product_comparison .comparison_feature .feature-name {

    width: 100%;

    float: none;

    clear: both; } }

@media (min-width: 250px) and(max-width: 480px) {

  #product_comparison td {

    float: none;

    width: 100%; }

 

  #product_comparison .comparison_feature td {

    float: left;

    width: 50%; }

  #product_comparison .comparison_feature .feature-name {

    width: 100%;

    clear: both; }

  #product_comparison .comparison_feature .product-name {

    width: 50%;

    float: left;

    display: block; } }

 

 

Seems to work except when I view it on the PC responsive (largest) view.  I tried various minimum sizes but there is no change.  I am testing this by reducing the browser window.  I tried different browsers and screen resolutions, too.

 

And what can I use to copy the line #'s when copying code?  This is C&P'd from Notepad++. 

 

 

 

Edited October 7, 2016 by Copernican Theory (see edit history)