I have some images of a laptop and a tablet displayed on my webpage. The issue I am facing is that the div above the laptop should always match the width of the laptop. Everything looks great at full width, but problems arise when I scale down the window size.
I want the layout to scale properly when viewed on smaller screens or mobile devices.
Here is how it looks at full width: https://i.sstatic.net/XJtro.png
And this is how it appears on smaller devices: https://i.sstatic.net/jzT49.png
Here is the HTML block:
<div class="col-lg-6">
<div class="rain">
/* raindrops here */
</div>
{{-- RAIN DROPS(IMAGES) --}}
<div class="parent">
<img src="{{ url('img/header/laptop.svg') }}" class="laptop">
<img src="{{ url('img/header/tablet.svg') }}" class="tablet">
</div>
</div>
And here is the CSS:
.rain {
position: relative;
width: 536px;
height: 329px;
opacity: 0.52;
background-image: linear-gradient(to bottom, rgba(107, 233, 228, 0), #6be9e4);
left: 120px;
top: -60px;
}
.parent {
position: relative;
top: 50;
left: 0;
}
.laptop {
position: absolute;
left: -45px;
top: -145px;
}
.tablet {
position: absolute;
left: -45px;
top: 15px;
}
How can I ensure that the layout displays correctly on all devices? Any tips or suggestions?