The default design of Supermarket theme has shown the sub-category title overlap the sub-category thumbnail. If you don't like it and prefer showing the title below the thumbnail. You can add the below CSS to your Footer Script (Manager panel > Storefront > Footer Script)
<style> .papaSupermarket-subcategories-grid { display: flex; flex-flow: row wrap; } .papaSupermarket-subcategories-image { display: block; position: relative; background: #ffffff; margin-bottom: 10px; } .papaSupermarket-subcategories-image:after { content: ''; display: block; width: 100%; padding-top: 100%; } .papaSupermarket-subcategories-image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-height: 100%; } .papaSupermarket-subcategories-image+.papaSupermarket-subcategories-name { display: block; position: static; padding: 0; background: transparent; -ms-transform: none; transform: none; } @media (max-width: 800px) { .papaSupermarket-subcategories-grid { margin: 0; } } </style>
Papathemes
Comments