Add the below CSS to your Footer Script (Admin panel > Storefront > Footer Script)
<style>
.papaSupermarket-subcategories-grid {
display: flex;
flex-flow: row wrap;
margin-left: 0;
margin-right: 0;
}
.papaSupermarket-subcategories-grid-item {
background: #ffffff;
padding: 0.75rem;
margin-left: 0.375rem;
margin-right: 0.375rem;
margin-top: 0.75rem !important;
width: calc(50% - 0.75rem);
border: 1px solid #dcdcdc;
border-radius: 4px;
box-shadow: 0 3px 0 #dcdcdc;
}
.papaSupermarket-subcategories-image {
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%;
transition: 0.3s transform ease-in;
}
.papaSupermarket-subcategories-grid-item:hover img {
-ms-transform: none;
transform: none;
}
.papaSupermarket-subcategories-image {
width: 100%;
}
.papaSupermarket-subcategories-name {
display: block;
font-size: 1rem;
font-weight: 400;
}
.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-image {
display: none;
}
}
@media (min-width: 801px) {
.papaSupermarket-subcategories-grid {
margin-left: -0.375rem;
margin-right: -0.375rem;
}
.papaSupermarket-subcategories-grid-item {
width: calc(33.3333% - 0.75rem);
}
}
@media (min-width: 1261px) {
.papaSupermarket-subcategories-grid-item {
width: calc(25% - 0.75rem);
}
}
</style>
Papathemes
Comments