As a student learning html/css, I am currently facing some challenges with my first website. My main issue is setting up the page to be fluid rather than fixed. The box, image, and text are all configured to be absolute on the page, but I cannot seem to make the entire page fluid so that it fits properly in the browser without being too large. Here is the snippet of my css/html :
body {
background-color: white;
}
.square {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
background-color: rgb(49, 184, 184);
width: 2023px;
height: 842px;
}
.image {
position: absolute;
left: 588px;
top: 41px;
width: 1376px;
height: 927px;
}
.con {
position: absolute;
font-size: 200px;
color: white;
width: 271px;
height: 209px;
left: 293px;
top: 106px;
}
.view {
position: absolute;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
background-color: rgba(0, 103, 103, 0.7);
border-color: transparent;
font-size: 200px;
color: white;
left: 588px;
top: 104px;
width: 396px;
height: 212px;
}
html,
body,
square,
image,
con,
view {
display: block
}<!DOCTYPE html>
<html lang="en">
<head>
<title>ConView</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="square"></div>
<img src="indeximage.jpg" class="image">
<p class="con">con</p>
<p class="view">view</p>
</body>
</html>