strange behavior of thumbnail's "product description" and "quickview" at index page in some widths

[jhmorales.ceramics]

Hi,

I've got this strange behavior of thumbnail's "product description" and "quickview" only at index page in some widths (from 992px to 1200px). The thumbnails of the products are 225px wide but it's "product description" and "quickview" are displayed in 250px wide. This is an annoying view in my tablet where I cannot change the size of the window. I can reproduce this in my desktop monitor when I reduce the width of the window. I've tried to fix it via child_classic/custom.css but till now I cannot did it. PS version is 1.7.7.3, this was right in the 1.7.6.5 version.

#products .product-description,
#products .highlighted-informations {
    width: 225px!important;
}
Instead of #products (I don't understand why this appears in the styles section of the page in the developers tools of chrome because there si no any id="products" in the page, but there is an id="index") I've also tried #index, .thumbnail-container, .product, etc. and nothing works.

Any advice?, thanks in advance.

[Prestachamps]

Hi,

you have this rule which is forcing the width to minimum 250 :

.page-index #products .product, .page-index .featured-products .product, .page-index .product-accessories .product, .page-index .product-miniature .product, .page-search #products .product, .page-search .featured-products .product, .page-search .product-accessories .product, .page-search .product-miniature .product{

width: 25%;

min-width: 250px;

}

 

You can modify this to be min-width: 240px;

or create a new rule for your resolution:

@media (min-width: 992px) and (max-width:1200px){
     .page-index .featured-products .product{
         min-width:240px!important;
     }
}

Kind regards, Leo.

[jhmorales.ceramics]

Hi,

 

thanks for the answer but it doesn't work. I've tried a lot of combinations and there is no change. I think that it is a bug or something in the style imposed by the jquery when  charge the products after the custom.css at the end of the footer.

 

In Chrome with the developer tools I can fix the error, by the way of change de width of the product-description and highlighted-informations to 225px or changing the width of the a.thumbnail.product-thumbnail to 248px or 250px or auto, inherit, etc. There it works, but I put this at the end of the custom.css, clear cache and refresh page and this changes disappears.

[musicmaster]

On 4/22/2021 at 1:56 PM, jhmorales.ceramics said:

Instead of #products (I don't understand why this appears in the styles section of the page in the developers tools of chrome because there si no any id="products" in the page, but there is an id="index") I've also tried #index, .thumbnail-container, .product, etc. and nothing works.

There are three comma separated entities in that header. In your case ".featured_products" applies

[jhmorales.ceramics]

10 hours ago, musicmaster said:

There are three comma separated entities in that header. In your case ".featured_products" applies

Nop, nothing works. I've tried with  ".featured_products" and the bug continues.

Even I've tried the opposite way, if I cannot reduce .product-description and "highlighted-informations" to 224 or 225px then maybe I could expand  .thumbnail-container.reviews-loaded" to 250px. But there is no way.

Also, no matter what rule I write in the custom.css to change this behavior this is not shown in the dev tools> Elements> Styles frame at the right of the window. In this case it only shows the theme-xxxxxxxxxxx.css rules. There I can make both changes (to reduce ones or expand the other one) that works instantly, and I write the same in custom.css and not they are not shown.

And this behavior only happens in the index page when the windows has 992 to 1200px (my android Samsung A6 10.1" tablet), and the <div class="thumbnail-container reviews-loaded"> is reduced to 224px width. That div is 250px width when the window's width is over 1200px or lower of 992px. 😵

[jhmorales.ceramics]

Solved

I've made a lot of changes to some files in child_classic. For this behavior I've modified:

.....child_classic\templates\catalog\_partials\miniatures\product.tpl

after the initial comments, this:

{block name='product_miniature_item'}
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="product"
 {if $page.page_name == 'index'} style="max-width: 225px!important;margin:0 10px;"{/if}>
  {if isset($position)}<meta itemprop="position" content="{$position}" />{/if}
  <article class="product-miniature js-product-miniature" {if $page.page_name == 'index'} style="max-width: 225px!important;"{/if} data-id-prod....

 

some lines down:

        <div class="product-description" {if $page.page_name == 'index'} style="max-width: 225px!important;"{/if}>
 

near the end of the file:

      <div class="highlighted-informations {if !$product.main_variants} no-variants{/if} hidden-sm-down" {if $page.page_name == 'index'} style="max-width: 225px!important;"{/if}>
 

With this changes I forced the div.product, the div.product-description and the div.highlighted-informations to have the same width no matter the screen size and type.

 

I hope this can be useful!