Created
December 12, 2025 06:13
-
-
Save TanvirHasan19/cb52fd3fffee9c5fe94ac3b36d1ce50c to your computer and use it in GitHub Desktop.
Make the UL act like a grid container
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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