On my main page, I have a contact form positioned on top of an image slider that appears like this:
https://i.sstatic.net/aGnj1.png
The contact form is nested inside the slider's div as shown below:
<div class="img-slide">
<div class="img fade">
<img src="#">
</div>
<div class="contact-form">
</div>
</div>
When I view the mobile version using Chrome, initially it appears like this and then upon refreshing, everything displays correctly.
https://i.sstatic.net/zQnhf.png
The issue seems to arise from the contact form, as removing it resolves the margin problem.
Below are the CSS codes for both the web and mobile versions:
**Web Version**
.img-slide .contact-form {
position: absolute;
top: 20px;
right: 40px;
height: 320px;
width: 310px;
background-color: #d1cfcf;
text-align: center;
}
***Mobile Version***
@media only screen and (max-width: 415px) {
.img-slide .contact-form {
display: inline-block;
width: 100%;
position: unset;
margin: 0;
}
}