Styling eines Shop-Widgets, um ganz anders auszusehen

Question

Ich habe ein Shop-Widget, das nicht das ansprechendste ist, das ich von meinem Affiliate-Netzwerk bekomme, aber ich möchte das Erscheinungsbild ändern, damit es sauberer und netter aussieht. Wenn Sie die jsfiddle besuchen und die CSS löschen, können Sie das ursprüngliche Widget sehen. Im Moment habe ich gerade Chrome Entwickler und CSS verwendet, um das Aussehen des Widgets zu ändern. Aber ich stecke gerade fest, weil ich nicht herausfinden kann, wie man zwischen den verschiedenen Elementen im Widget Platz findet. Ich möchte 4 oder 5 Elemente pro Zeile mit etwas Abstand zwischen ihnen. Ein bisschen wie diese Seite (https://thestylescribe.com/shop/), aber ohne den schwarzen Rand und Hover Info. Sie verwendet das gleiche Widget wie ich, also weiß ich, dass es möglich ist, es anders zu stylen. Kann mir jemand helfen, es so aussehen zu lassen?

jsfiddle - https://jsfiddle.net/rayfm9cp/

.bo-garden { 
 
    margin: 0 auto !important; 
 
    width:100% !important; 
 
    overflow: visible !important; 
 
    min-width:700px !important; 
 
} 
 
.bo-box { 
 
    background: none !important; 
 
    border: none !important; 
 
} 
 
.bo-con:after, .bo-con:before { 
 
    background: none !important; 
 
} 
 
img.bo-img{ 
 
    width: 200px !important; 
 
    height: 300px !important; 
 
}

<div class="boutique-widget" data-widget-id="625672"><script type="text/javascript">!function(d,s,id){var e, p = /^http:/.test(d.location) ? 'http' : 'https';if(!d.getElementById(id)) {e = d.createElement(s);e.id = id;e.src = p + '://' + 'widgets.rewardstyle.com' + '/js/boutique.js';d.body.appendChild(e);}if(typeof window.__boutique === 'object') if(d.readyState === 'complete') {window.__boutique.init();}}(document, 'script', 'boutique-script');</script><div class="rs-adblock"><img src="//assets.rewardstyle.com/production/c108ac3fc3225bcc7f580567db42a46920d79336/images/search/350.gif" onerror="this.parentNode.innerHTML='Disable your ad blocking software to view this content.'" style="width: 15px; height: 15px;" /><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

Answer 1

Es ist ein wenig schwierig, weil Sie verwenden müssten wichtig in Ihrem CSS. Ich denke, das Folgende gibt Ihnen, was Sie brauchen:

.bo-garden { 
    min-height: 5055px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
} 

.bo-con { 
    margin: 0!important; 
    position: relative!important; 
    top: 0!important; 
    left: 0!important; 
    width: 30%; 
}