Styling the store widget to look completely different
I have a store widget that is not the most attractive one I get from my affiliate network, but I would like to change the look to make it look cleaner and nicer. If you visit jsfiddle and remove the css you will see the original widget. Right now I just used chrome developer and css to change the look of the widget. But I'm stuck right now because I can't figure out how to add space between the various elements of the widget. I would like 4 or 5 elements per row with some space in between. Kind of like this site ( https://thestylescribe.com/shop/ ), but without black border information and guidance. It uses the same widget as me, so I know you can put it in different ways. Can anyone help me to do it like this.
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>
source to share
It's a little tricky because you will need to use! important in your CSS. I think the following gives you what you need:
.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%;
}
source to share