CODEWITHSUNDEEP
javascriptcsswidgetstyling
user6738171
user6738171

Reputation: 1007

Styling a shop widget to look completely different

I have a shop widget that isn't the most appealing that I get from my affiliate network, but I would like to change the appearance of it to make it look cleaner and nicer. If you visit the jsfiddle and delete the css you can see the original widget. Right now I have just been using chrome developer and css to change the appearance of the widget. But I'm stuck right now because I can't figure out how to add space between the different items in the widget. I would like 4 or 5 items per row with some space between them. Kind of like this site (https://thestylescribe.com/shop/) but without the black border and hover info. She uses the same widget as me, so I know it is possible to style it differently. Can anyone help me out in making it look 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>

Upvotes: 2

Views: 320

Answers (1)

Gerard
Gerard

Reputation: 15786

It's a little tricky because you would have 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%;
}

Upvotes: 2

Related Questions