Style for the geolocation directory demo and "Yellow Pages clone"

yellow-pages-clone.html

<style>
	
.gv-list-multiple-container.gv-container{
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
}

.gv-list-multiple-container.gv-container .gv-list-view {
    margin-right: 10px;
width: 370px; /* Adjust this width */
	border: 2px solid #FFD100 !important;
	border-radius:15px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
	
.gv-list-view {border:none !important;}
.gv-list-view-title {border:none !important;}
.gv-list-view-footer {border:none; background:none; padding-top:0px; padding-bottom:15px; padding-right:5px;}
	
.yp-list {padding: 0px; list-style:none; font-size:16px;}
.yp-list li {margin-bottom:20px;}
.yp-icon {float:left; margin-right:10px; vertical-align: middle !important;}
.yp-info {font-size:16px;}
	
.gv-search-box .gv-search-button {background: #FFCC01; color:#000000;}	
.gv-search-box .gv-search-button:hover {background: #FFCC01; color:#444444;}	
  
</style>

<!-- replace merge tags with your own -->
<p style="font-size:18px; margin-bottom:20px;">
	{Industry:2}
</p>
<ul class="yp-list">
	<li>
	<span class="yp-icon"> <img src="https://site.try.gravitykit.com/wp-content/uploads/2023/04/phone-icon.png"></span>
		<span class="yp-info">{Main business phone:5}</span>
	</li>
	<li>
	<span class="yp-icon"> <img src="https://site.try.gravitykit.com/wp-content/uploads/2023/04/location-icon.png"></span>
		<span class="yp-info">{Address (Street Address):4.1}</span>
	</li>
	<li>
	<span class="yp-icon"> <img src="https://site.try.gravitykit.com/wp-content/uploads/2023/04/email-icon.png"></span>
		<span class="yp-info">{Business Email:6}</span>
	</li>
</ul>