there is a problem in fiting the page to mobile - html

Question

i've done a simple hmtl site and wanted to make it responsive to mobile but i can't
ive tried a media code but still doesn't work idk what to do
can you help me
this is how it looks from mobile
and
this is my css
body{
margin: 0px;
display: inline;
align-self: center;
}
h1 {
font-family: cairo-bold;
text-align: center;
color: #697683;
}
h2 {
font-family: sky-bold;
text-align: center;
color: #1ba690;
}
.iinkor-box {
background-color: #f8f8f8;
height: 180px;
width: 180px;
display: inline-block;
margin-bottom: 15px;
margin-right: 8px;
margin-left: 8px;
}
.iinkor-box img {
width : 138px;
height: 108px;
display: inline-block;
padding: 10px;
}
.iinkor-box a {
color : #41978f;
font-size: 16px;
font-family: bein;
display: inline-block;
}
.iinkor-box img:hover {
opacity: 80%;
}
a:active {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: none}
a:link {text-decoration: none}
.iinkor-button {
background-color:#07439b;
border-radius:28px;
border:1px solid #1978ab;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:sky-bold;
font-size:17px;
padding:11px 18px;
text-decoration:none;
text-shadow:0px 1px 0px #284666;
}
.iinkor-button:hover {
background-color:#2a71bd;
}
.iinkor-button:active {
position:relative;
top:1px;
}
#media only screen and (max-width:800px) {
/* For mobile phones: */
.iinkor-box {
width:60%;
}
}
please if you edit the code tell me what to do also so i can know for the future
thank you in advance

Answer 1

Instead of trying to make it responsive only to mobile, consider that you app should be responsive to any screen size.
In the above css code the only rule that is "responsive" is the width: 60% everything else is pretty much static.
How is your HTML tree constructed? Where are the .iinkor-box container rules?
And more importantly, what is your desired effect?
Consider working with flexible patterns.
Start mobile first and then progressively enhance your code to achieve the desktop view.