I want to make div for class "BLACK" which doesn't resize on resizing browser-CodePudding

how to make a div which do not resize with browser resize? div for that code is as below there are other 7 classes same as purple but I want BLACK not to resize with browser what are possible steps I can look for

<div >
    <P>THIS IS BLACK DIV AND IT WILL NOT RESIZE WITH 
       BROWSER</P>
</div>
<div >
    <p>THIS IS PURPLE DIV AND IT WILL RESIZE WITH BROWSER</p>
</div>


.BLACK
{
    background-color: black;
    background-size: contain;
    background-size: cover;
    font-size: fixed;
    height:20%;
    width:20%;
    display: block;
    margin-right: 30%;
    margin-top: 1%;
    padding-top: 9%;
    padding-bottom: 8%;
}

.PURPLE
{
    background-color: purple;
    height: 7%;
    padding-top: 0.05%;
    padding-bottom: 0.05%;
    margin-left: 20%;
    text-align: center;
}

CodePudding user response：

You have to remove all the attributes with a percentage, since that makes it so the square width/height is based on the window it's currently in

TLDR: remove

margin-right: 30%;
margin-top: 1%;
padding-top: 9%;
padding-bottom: 8%;

change to a static width and height

height:20%;
width:20%;

CodePudding user response：

you can make a div fixed size using px unit like width:20px; or width:300px; your anser is-->

    <div >
    <P>THIS IS BLACK DIV AND IT WILL NOT RESIZE WITH 
       BROWSER</P>
</div>
<div >
    <p>THIS IS PURPLE DIV AND IT WILL RESIZE WITH BROWSER</p>
</div>


.BLACK
{
    background-color: black;
    background-size: contain;
    background-size: cover;
    font-size: fixed;
    height:300px;
    width:350px;
    display: block;
    margin-right: 30%;
    margin-top: 1%;
    padding-top: 9%;
    padding-bottom: 8%;
}

.PURPLE
{
    background-color: purple;
    height: 7%;
    width:20%;
    padding-top: 0.05%;
    padding-bottom: 0.05%;
    margin-left: 20%;
    text-align: center;
}