Skip to content

Instantly share code, notes, and snippets.

@TanvirHasan19
Created December 12, 2025 06:13
Show Gist options
  • Select an option

  • Save TanvirHasan19/cb52fd3fffee9c5fe94ac3b36d1ce50c to your computer and use it in GitHub Desktop.

Select an option

Save TanvirHasan19/cb52fd3fffee9c5fe94ac3b36d1ce50c to your computer and use it in GitHub Desktop.
Make the UL act like a grid container
/* Make the UL act like a grid container */
ul.wcv_vendorslist.grid{
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 24px;
margin: 0 0 20px 0;
padding: 0;
list-style: none;
}
/* Responsive columns */
@media (max-width: 1200px){
ul.wcv_vendorslist.grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px){
ul.wcv_vendorslist.grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Each vendor tile */
ul.wcv_vendorslist.grid .vendor_list{
border: 1px solid #e6e6e6;
background: #fff;
padding: 22px 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 170px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Logo block */
ul.wcv_vendorslist.grid .vendor_list .vendor_list_avatar{
margin: 0;
}
ul.wcv_vendorslist.grid .vendor_list .vendor_list_avatar img{
width: auto;
height: auto;
max-width: 120px;
max-height: 72px;
display: block;
}
/* Keep only the name visible (hide phone, address, button) */
ul.wcv_vendorslist.grid .vendor_list .vendor_list_info small,
ul.wcv_vendorslist.grid .vendor_list .vendor_list_info br,
ul.wcv_vendorslist.grid .vendor_list .vendor_list_info .button{
display: none !important;
}
/* Center and style the vendor name */
ul.wcv_vendorslist.grid .vendor_list .vendor_list_info{
text-align: center;
}
ul.wcv_vendorslist.grid .vendor_list .vendor_list_info h3{
margin: 0;
font-size: 18px;
line-height: 0;
font-weight: 800;
}
ul.wcv_vendorslist.grid .vendor_list .vendor_list_info h3 a{
color: #d11a2a;
text-decoration: none;
}
/* Make the whole tile clickable (without changing HTML) */
ul.wcv_vendorslist.grid .vendor_list{
position: relative;
}
ul.wcv_vendorslist.grid .vendor_list .vendor_list_avatar a,
ul.wcv_vendorslist.grid .vendor_list .vendor_list_info h3 a{
position: relative;
z-index: 2;
}
/* Hover style like your design */
ul.wcv_vendorslist.grid .vendor_list:hover{
border-color: #cfcfcf;
box-shadow: 0 10px 24px rgba(0,0,0,.10);
transform: translateY(-2px);
outline: 1px solid black;
}
ul.wcv_vendorslist.grid .vendor_list:hover .vendor_list_info h3 a{
text-decoration: underline;
}
/* Increase logo container height */
ul.wcv_vendorslist.grid .vendor_list .vendor_list_avatar{
height: 140px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 0;
border-bottom: 0;
}
/* Increase actual logo size */
ul.wcv_vendorslist.grid .vendor_list .vendor_list_avatar img{
max-width: 180px;
max-height: 110px;
width: auto;
height: auto;
object-fit: contain;
}
.wcv_vendorslist .vendor_list .vendor_list--shop-name {
min-height: 0px;
margin-bottom: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment