Hi dear welcome to "CodePrime" Blog . In this post we are going to learn How to use | Min-Width | Max-Width. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min-Max Width property in css by codeprime</title>
</head>
<body>
<div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGmDZsMvdeN16cT3mAHGq6QKR89fMkzFsKEUGB7G_ESp8yfbxgNQSZwrBMoHIEQjzGsWf9kg46R7xK0Q3ea7NC5IXUhFczH1Zo053vAJ8UtKlpb7LyxF_Eiuf_LEI59tIITfQT9MX7kcPWcsKeBhVouTctzx5W-uxKIgrQ_40nw9aAfXPH2sxS0M9og/s1600/nature-bg.jpg" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio facilis debitis architecto unde eligendi sed numquam voluptatum et nulla sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint accusantium deleniti, assumenda libero nobis ab unde magnam commodi quae ipsam.</p>
</div>
</body>
</html>
CSS CODE
.box{
min-width: 300px;
max-width: 700px;
border: 5px solid #ccc;
}
img{
width: 100%;
}
body{
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
text-align: center;
}
0 Comments