HTML-CSS Android environment

HTML-CSS
1

Hi There,
I am having an issue with a web-page I have been working on.The issue comes up only when using the page in the mobile environment specifically android.
I have some fields on the page to enter data and also a feature to upload pictures. The issue comes up only when I upload the pictures. Uploading pictures expand the page to the right and shift all the other fields on the page as well. Everything get out of place and expands. This issue does not happen when using the page on a computer.
I am mainly using HTML, CSS, and javascript.
Here is my HTML line for the upload

The CSS code for the media environment is handled this way
@media(min-width:700px){
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
overflow-x:hidden;
position:relative;
}

.wrapper > *{
    padding:2em;
}

.company-info h3, .company-info ul, .brand{
    text-align: left;
}

.service {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 0;
}

.company-info{
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
}

.fullMobileOnly {
    grid-column: 1;
}

.fullMobileOnlyRight {
    grid-column: 2;
}

}

I would appreciate any help infiguring out why the page shift to the right and all the fields are shifted when using the upload feature in android environment.

Thank you!
Zahra

2

In order to help you we are going to need a link to your live project/code repo so we can test this for ourselves.

3

It is a company project and I am under NDA. I cannot share too much about the content. I am really sorry.

4

No need to apologize, I’m more than willing to help but I don’t think I can at this point unless I can actually see the problem. Maybe someone else will have some ideas?

Good luck.