Daniel Daniel - 1 year ago 69
CSS Question

CSS Positioning-Position relative and absolute Bootstrap

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

Answer Source

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 .thumbnail