I am new to designing websites using HTML and CSS and I would like to create a page design like the one below:
As shown in the above picture, the page needs to have a header with a logo, and then two boxes that slightly overlap each other. However, once I did attempt such a design, while it did look good on one screen, I faced a number of problems when attempting to resize the screen such as the squares not moving/resizing to the right position on the new screen.
Below is the code that I have already tried:
.header {
position: absolute;
width: 100%;
min-height: 18rem;
left: 0;
top: 0;
background: #F1E579;
}
.logo {
font-size: 350%;
font-family: Above;
margin-left: 3rem;
margin-top: 2.75rem;
}
.box1 {
position: absolute;
width: 37rem;
min-height: 40rem;
left: 7.8rem;
top: 12.3rem;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.box2 {
position: absolute;
width: 42rem;
min-height: 45rem;
left: 44rem;
top: 10rem;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}<div class="container">
<div class="header">
<div class="logo">LOGO</div>
</div>
<div class="box1"></div>
<div class="box2"></div>
</div>>Solution :
The problem is with the measurement units you use. I have changed the measurement units in the appropriate points from rem to vw (viewport width).
1
vw= 1 % of the viewport’s width.
This may or may not be appropriate for you, but it achieves the requirement of resizing the boxes (width only, I left the box heights alone).
However, this is only a guess and I don’t know what you’d like to achieve on mobile screens (phones in portrait view mostly). That definitely requires different styling.
.header {
position: absolute;
width: 100%;
min-height: 18rem;
left: 0;
top: 0;
background: #F1E579;
}
.logo {
font-size: 350%;
font-family: Above;
margin-left: 3rem;
margin-top: 2.75rem;
}
.box1 {
position: absolute;
width: 37vw;
min-height: 40rem;
left: 7.8rem;
top: 12.3rem;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.box2 {
position: absolute;
width: 42vw;
min-height: 45rem;
left: 44vw;
top: 10rem;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
@media (min-width: 1500px) {
.box1 {
width: 38vw;
}
}<div class="container">
<div class="header">
<div class="logo">LOGO</div>
</div>
<div class="box1"></div>
<div class="box2"></div>
</div>