CODEWITHSUNDEEP
css
autonomous
autonomous

Reputation: 23

Make div not move when resize

.maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    padding-left: 290px;

    margin-left: auto;
    margin-top: 30px;
}
<div class="maindiv"></div>

I created a div, but unlike any other project I made, this one moves when I resize the window. I also had to encounter the problem with other elements in this project too.

I tried right: 50%; left: 50%; but the div seems to be stuck at the opposite side of the window.

I also did position: absolute; but it didn't do anything.

Code:

.maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    padding-left: 290px;

    margin-left: auto;
    margin-top: 30px;
}

Upvotes: 1

Views: 75

Answers (2)

kian
kian

Reputation: 1687

Just add margin-right: auto to .maindiv class

Upvotes: 1

Salil Rajkarnikar
Salil Rajkarnikar

Reputation: 752

try using this

.maindiv {
        width: 250px;
        min-height: 300px;
        background-color: #f5ba13;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
        border-radius: 35px;
        padding-left: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: auto;
        margin-top: 30px;
    }

Upvotes: 1

Related Questions