CODEWITHSUNDEEP
csshtmltwitter-bootstrapcss-position
Tanvir Rahman
Tanvir Rahman

Reputation: 709

How can i fix position of a square in fieldset?

I want the square like below for all screensize enter image description here

But when i resize the window in smaller screen size it is looking like below: enter image description here

Please help me to solve this problem.I tried in many ways but couldnot solve the problem.Related codes are given below :

Html:

 <div class="price-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <div class="col-xs-12 col-sm-6">
                    <div class="square">
                        <fieldset class="price-border">
                            <legend>Standard</legend>
                            <p class="one" >Leaflet • Poster</p>
                            <p>Banner • Bill Board • Support 24/7</p>
                        </fieldset>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6">    
                </div>
            </div>
            <div class="col-xs-12"></div>
        </div>
    </div>
</div>

CSS:

.square {
    position: relative;
}
.price-border {
    margin-bottom: 25px;
}
.price-border legend {
    width: auto;
    margin-bottom: 2px;
    margin-left: 42%;
}
.price-border p.one {
    text-align: center;
    margin-top: 20px 20px 10px auto;
}
.price-border p:last-child {
    text-align: center;
    margin-bottom: 50px;
    margin-right: 20px;
}
.price-border:after {
    height: 0px;
    width: 0px;
    border: 39px solid #000;
    position: absolute;
    top: 34%;
    left: 93.5%;
    content: "";
    display: block;
    z-index: ;
    transform: rotate(45deg);
}

Upvotes: 0

Views: 302

Answers (1)

Mr Br
Mr Br

Reputation: 3901

Change .price-border:after style

/* CHANGES */
.price-border:after {
    left: auto;
    right: -36px;
}

Basically you only want to move your element to the right for number of pixels and how your element has static width you can just set right attribute. More generic solution would be doing it with transform. For your case, code bellow. 

.price-border:after {
    left: 100%;
    transform: translateX(-55%) rotate(45deg);
}

Upvotes: 1

Related Questions