Some styles from styled-components not applying when view with mobile device - css

Question

I ran into a problem which some styles on my website don't seem working when viewing on a mobile device. Where is my website: https://www.chingpingyang.club/
When I open it with my phone the submit button for the price filter and the price for books are having different styles from when I open the site with my laptop. And seems not only these two are not the same...
Here is the code for the submit button.
input {
all: unset;
font-size: 0.8rem;
width: 50px;
height: 20px;
cursor: pointer;
text-align: center;
color: ${props => props.theme.primWhite};
background-color: ${props => props.theme.interactive};
transition: 0.2s;
&:hover {
background-color: ${props => props.theme.interactiveDark};
}
}
Thank you all so much in advance!

Answer 1

The issue does look to be button, but everything else. The button didn't change for me at all. Try this css below.
#media (max-width: 800px){
.sc-fzoyTs.jZUSDr {
flex-direction: column;
}
.sc-fzoNJl.fvpgSY {
width: calc(100% - 40px);
border: 1px solid #efefef;
padding: 1rem;
margin: 0 auto 3rem;
}
.sc-fzoLsD.fYZyZu,
.sc-fzqBZW.chhgrb {
width: 100%;
}
.gpozzs {
flex-direction: row;
flex-wrap: wrap;
}
.gpozzs label {
width: auto;
margin: 0 1rem 0 0;
}
}

Answer 2

I have figured out the problem. It's caused by the "all: unset" I applied to the button. So just simply remove it and use other ways to remove the default button style.