Category images are covering text

[javisilencio]

When I visit a category in my store that has an assigned image, it overlaps the text and covers it. Also, in the category search box appears the magnifying glass in the center of the text box instead of appearing on the right.

 

I use Prestashop 1.7.0.6 (newly installed) with the classic template (the one installed by default) and I have not made any changes in CSS or HTML. My website is www.viteperfumes.com

 

I attach an image where you can see the problem. Hope someone can help me.

[rictools]

- - -

Edited June 9, 2017 by rictools (see edit history)

[rodsimm]

Hi JaviSilencio,

 

I have discovered the same problem with the 1.7 classic template...

 

I've solved the text disappearing behind image by rewriting some code and adding some CSS.

To avoid overwriting files in the classic theme I have created a child theme. In the child theme I have copied the category.tpl and the custom.css files into their correct folders.

 

Then made these 2 changes...

 

1. Re-written the if statement in the classic-child-theme/templates/catalog/listing/category.tpl as follows..

      {if $category.description}
        
        <div id="category-description" class="text-muted hidden-lg-up">{$category.description nofilter}</div>
      
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}" />
        </div>
        
        <div id="category-description" class="text-muted hidden-md-down">{$category.description nofilter}</div>
        
      {/if}

2. Added this code to the classic-child-theme/assets/css/custom.css file..

@media (min-width:992px) {
  
  div.block-category.card.card-block {
    padding-bottom: 0px;
  }
  
  div.block-category.card.card-block.block-category .category-cover {
    position: inherit;
    float: right;
  }
  
  div.block-category.card.card-block.block-category #category-description {
    margin-right: 165px;
  }
  
  /* self clearing rules */
  div.block-category.card.card-block:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  div.block-category.card.card-block { display: inline-block; _height: 1%; }
  /* Hides from IE-mac \*/
  div.block-category.card.card-block { display: block; }
  /* End hide from IE-mac */
}

That's all there is to do.

You may need to clear caches to view the results?

 

I hope this solution will help.

[cafe21]

Hi

 

I am just setting up first 1.7.2.2 site and found this.

 

Brilliant solution - thank you for sharing.

 

EC

[ZORANVEDEK]

Thanks, was having a problem with that myself. I'm on 1.7.6.9 and this problem still  exists.  I read elsewhere in the forum  this was added as a "feature".  I don't think I fully understand the logic in that,  but this fixed my problem, so  many thanks.