0

I am trying to make the red dotted border fit my row. At the moment the border is going out of the row, but I would like the line to be inside the row like this:

enter image description here

I am not quite sure if it is possible to control the width of a border?

.sbp-products-row { border-bottom:1px dotted red; }
<div class="sbp-item7"> <div class="row sbp-products-row"> <div class="col-xs-6 col-sm-6"> <a href="#"> <img class="sbp-product-img" src="https://i.etsystatic.com/isla/aee233/24534674/isla_75x75.24534674_ozrbr80h.jpg"> </a> </div> <div class="col-xs-6 col-sm-6"> <h4><a class="sbp-product-title" href="#">Produkt</a></h4> <p>Produkt tekst</p> </div> </div> </div>

Improve this question
0

1 Answer 1

Reset to default
1

It looks like .sbp-products-row is wider than .sbp-item7. You can verify this by outlining both elements to visibly see their widths with CSS outline: 1px solid on both of the elements.

I would try setting .sbp-products-row with width: 100%; so that it is 100% of the width of its parent.

It also looks like you don't want the red border line to touch the walls of the container (which is .sbp-item7, so I would also give .sbp-item7 some padding - padding: 10px;.

For visible testing of the sizes of these elements (temporary):

.sbp-products-row, .sbp-item7 { outline: 1px solid; }

These styles might work:

.sbp-products-row { padding: 10px; } .sbp-item7 { width: 100%; }

Another commenter suggested using negative margins, which you can try to do, but negative margins should never be your first plan of attack.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.