So basically I have in my HTML(using bootstrap classes) a page with products that are showcased using the thumbnail and caption classes. Over the picture of the products there is a ON SELL(rounded red tag). I have given to this red circle element position absolute and to the col-sm-9 position relative. Problem is that when I resize the browser the ribbon that comes over the thumbnail is not responsive.
I know what this two positioning properties mean and how they work in respect with each other. But it looks that in practice I`m missing on something very essential.
I will paste my html and css over here and if you can give me your opinion I`ll be very glad to learn this the proper way and give you my thanks :)
Here you have the whole code: http://www.bootply.com/8TMS5WgWt2
In your CSS for
.sale change your positioning value of
left: 149px to
right: -19px. This will help it better position as the width changes. I would also recommend moving your
position: relative off the
.col-sm-9 and onto